:is and :where in CSS

  Not that I am a CSS guru, but it was surprising for me that I didn't know about the :is pseudo selector (and the very similar :where), especially since I have been heavily using :has.

  But wait a minute, you will say, why do I need a selector for being something? Don't all selectors do that by default? The answer is that these pseudo selectors support lists of selectors, thus acting like a kind of context block for CSS.

  Imagine that you want to style the icons in a container in a certain way, but the icon elements are both span and div with :after content and actual img. A classic CSS rule would look like this:

.container div[data-icon],
.container span[data-icon],
.container img {
 ...
}

but with :is this gets significantly simple:

.container is:(div[data-icon], span[data-icon], img) {
 ...
}

/* OR */

.container is:([data-icon]:is(span,div), img) {
 ...
}

The only thing to clarify is the difference between :is and :where, because they apparently work the same. Well, :where does not add specificity, while :is does add the specificity of the most specific selector inside it. .container a:is([data-icon],.myclass:hover) has the same specificity as .container a.myclass:hover while .container a:where([data-icon],.myclass:hover) has the same specificity as .container a.

Both :is and :where have been available for Chromium and Firefox (versions 88 for both) since early 2021, so they are relatively new but well covered.