Using the Specificity of :where() as a CSS Reset

As mentioned in Three important things you should know about CSS :is(), the specificity of :where() will always be 0:

:where() works the same way like :is() does, but will always have a specificity of 0. You can cleverly wrap this around other selectors to undo their specificity. Think of :where(:not(…)) for example.

Over at CSS-Tricks, Mojtaba Seyedi details how we can also use this to do more clever CSS Resets

With the power of this selector, libraries can give us style with no specificity. So there would be no specificity to compete with when we as authors write CSS.

Like so:

:where(ul[class]) {
  list-style: none;
}

.list {
  list-style: square;
}

The contents inside :where() is specific enough to remove list-style only when a class is being used on an ul, while the use of :where() does not hinder any further overriding by the CSS developer.

Using the Specificity of :where() as a CSS Reset →