The :where() pseudo class in CSS

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.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X