The :where() pseudo class in CSS

DanielSeptember 21, 2022February 5, 2023

The CSS :where() is very similar to the :is pseudo class. This means that if we write:

p :where(.main, .highlight) {
    background-color: yellow;
}

It will serve as a less verbose way of writing:

p .main, 
p .highlight {
    background-color: yellow;
}

However, the difference between :is and :where is given by the specificity of these selectors.

While :is has the specificity equal to the selector parameter with the highest specificity, the :where has zero specificity.

Let's take a look at the below code:

form p, form #main { color: red }
form :is(p, #main) {color: red}
form :where(p, #main) {color: red}

From a targeting point of view, all three lines do the same thing. They set a red color to any p element or any element with an id of main that is set inside of a form.

The difference is given by the specificity power of these rules:

1. the first two rules form p and form #main have a specificity of 0,0,2 (two elements) and 1,0,1 (one id and one element)
2. the second rule form :is(p, #main) comes with a specificity of 1,0,0 (the highest passed selector is an id)
3. and the third rule form :where(p, #main) has just a specificity of 0,0,1 (only the form element is taken into account, as :where(p, #main) has a zero specificity)

One other nice pseudo selector example is how to make a dropdown menu with focus-within.