: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…