You are given two CSS selectors that you do not control. How can you build a new selector that matches both of them?
item_selector = 'div'
active_selector = '.is-active'
Can't I just concat these selectors?
# Bad
new_selector = "#{item_selector}#{active_selector}"
# => "div.is-active"
Don't! This will break as soon as one of the selectors is actually a selector list.
item_selector = 'div, span, p' # <- Selector list
new_selector # => "div, span, p.is-active" (wrong)
Solution
Wrap both selectors with :where() and you're safe.
# Good
new_selector = ":where(#{item_selector}):where(#{active_selector})"
# => ":where(div, span, p):where(.is-active)"
You can also exclude a selector by wrapping it in :not():
:where(div, span, p):not(.is-animating)
Posted by Dominik Schöler to makandra dev (2024-09-16 14:11)