How :where Can Simplify Global CSS Resets and Reduce Specificity

In early web development, layout and positioning relied on tables and hacky techniques. Today, CSS has evolved, allowing developers to write cross‑browser code easily, create responsive layouts, and reduce stylesheet size.

Using :where to Set Global Default Styles

Like :is, the :where pseudo‑class accepts a selector list as its argument.

.nav-link:where(:focus, :hover, [aria-current="page"]) {}

The difference is that selectors inside :is keep the highest specificity among them, while selectors inside :where are assigned the lowest possible specificity (0). Specificity values are:

Inline style: 1000

ID selector: 100

Class, attribute selectors, etc.: 10

Element, pseudo‑element selectors: 1

Universal selector, adjacent selectors, etc.: 0

Thus, :is raises each selector’s specificity, whereas :where lowers it. The following two snippets have the same effective specificity:

// 10 + 0
.nav-link:where(:focus, :hover, [aria-current="page"]) {}

// 10
.nav-link {}

No matter how complex the selector list, :where always has a specificity of 0, as shown here:

where(#id:not(.very.high.specificity).more.classes) {}

Because of its low specificity, styles declared with :where are easy to override, making it perfect for global style resets. For example:

:where(ul, ol) {
  list-style: none;
}

:where(img) {
  max-width: 100%;
  height: auto;
}
/* etc */

These low‑specificity selectors ensure that the defined styles are unlikely to clash with other rules, so developers don’t need to increase specificity when overriding them.

In practice, CSS resets are placed at the top of a stylesheet, and techniques like BEM avoid using element selectors for styling. Using :where helps guarantee that custom styles won’t encounter specificity conflicts.

Adam Argyle notes that the low specificity of :where is valuable in public libraries, allowing users to easily override library styles with their own custom rules.