What is :is() and :where() in CSS? Are they same or different?
:is() pseudoclass function takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list.
The above is equivalent to the following, and this is useful for writing large selectors in a more compact form.
The same thing can be done with
The CSS pseudoclass function
:where() takes a list of selectors as an argument and select any element that can be selected by one of the selectors in that list.
The above is equivalent to the following,
But wait, both of them look identical. Then what’s the difference?
THE DIFFERENCE IS OF SPECIFICITY.
In CSS, If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will “win”, and its style declaration will be applied to that HTML element.
So basically, neither
:where() nor anything inside it counts for specificity. Its specificity is always 0.
On the other hand, everything inside the
:is() pseudoclass counts for specificity.
SO WHICH ONE TO USE…………..?
It completely depends on your goals. You can use
:is() pseudoclass if you want to reduce the selector duplication.
However, if you want lower specificity as well, then
:where() is the way to go!
If you want to write cleaner code or you just want to have tips like this every week, so you can follow me on medium will be more likely to show you the next article.