Here’s another post covering basics of :is pseudo selector:
Does :is() pseudo selector hint at CSS preprocessing in future?
where()
:where() is a pseudo-class function that accepts a selector list argument and appys the style to whichever selector matches.
:where(div, main, section) p {
font-size: 1rem;
}
Which is same is using :is as we saw in the :is() pseudo selector post.
DIFFERENCE
:where() has 0 specificity, always.
:is() has the specificity of the selector in its arguments.
Example
Here is one simple example in which the :where pseudo-class style is overridden by another style rule, which is added afterwards and that’s why it overrides the specificity of :where (0).
BUt if I change the order of the style rules, it will work:
:is :where differences examples pseudo-elements pseudo-selectors