Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

The :where pseudo selector in CSS

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)

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

Home Screencasts Best of Newsletter Search X