Where is not Is
I've never fully understood the difference between the
:where
and :is
CSS selectors so, in the spirit
of a random article I read online, I'm sharing my discovery here.
:is
allows you to represent an or-condition:
:is(.class, #id) *
selects all elements that are children
of .class
or #id
.
:where
allows you to represent an or-condition:
:where(.class, #id) *
selects all elements that are
children of .class
or #id
.
The difference lies in the specificity: :is
inherits the
specificity of the selected match, whereas :where
always
has a specificity of 0.
As such, my default is :is
since it more closely follows my
expectations of the cascade. One day I'll encounter a special case where
:where
is needed and will update this post to include it.