The CSS :where is very similar to the :is pseudo selector. 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.

Hover 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)

I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.

Newsletter subscribe: