As far as I know, the main difference between :is()
and :where()
pseudo-classes is that :is()
takes the specifity of the most specific of its elements, whereas :where()
has a neutral (zero) specifity.
From my point of view, the zero specifity if what we need more often, and this is why it seems that when either :is()
and :where()
can be used, it is better to use :where()
. Practically, there will be no difference, but why use tool which is designed for a slightly different use cases then yours?
(This is the same reason why prefer :nth-of-type()
over :nth-child()
when either of them can be used: there are very rare cases when you can use :nth-child()
but not :nth-of-type()
; whereas there are very few cases when you can use :nth-of-type()
but not :nth-child()
. That is, we can say that :nth-child()
is a more niche thing, like a truck compared to a car.)
But then, why user agent style sheets prefer :is()
over :where()
? For example, from the Safari for Mac user agent style sheet:
:is(dir, menu, ol, ul) :is(dir, menu, ul) {
list-style-type: circle;
}
Does it mean that, to put things simple, my reasoning is wrong, and when either :is()
and :where()
can be used, it would make more sense to use the former?