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:
- the first two rules
form p
andform #main
have a specificity of 0,0,2 (two elements) and 1,0,1 (one id and one element) - the second rule form
:is(p, #main)
comes with a specificity of 1,0,0 (the highest passed selector is an id) - 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.