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 →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.