CSS Specificity Reduction

To reduce the specificity of a CSS selector, you can use the :where pseudo-class.

For example, say you want all the buttons inside a .foo element to be red, but still allow overriding without overly specific selectors.

:where(.foo button) {
  color: red;
}

This will allow you to override the color of the button in other contexts, without having to use !important.

This is especially useful if you don't have control over the classes you want to use for overriding a style, for example if you're using a atomic css library such as tailwind. Or if you are making your own CSS library and want to allow users to override your styles without hassle.