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.