How to combine unknown CSS selectors

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)

Dominik Schöler

Last edit

2024-09-23

Henning Koch

License

Source code in this card is licensed under the MIT License.

Posted by Dominik Schöler to makandra dev (2024-09-16 14:11)