:where | CSS Selectors & Pseudo-classes

Like :is() but with zero specificity. Lets you style without affecting selector specificity.

Quick example

h1:where(.card, .panel, .modal) { margin-top: 0; }

Examples

Style links with zero specificity

:where(a, button) {
  color: blue;
}

a.custom { color: red; } /* This overrides :where() easily */

Unlike :is(), :where() has zero specificity, so other CSS rules can override it without using !important.

Simplify complex selectors without boosting specificity

.container :where(.card, .panel, .modal) {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

:where() is perfect when you want to group selectors but need to keep specificity low for cascade flexibility.

Create overrideable component styles

:where(.button) {
  padding: 8px 16px;
}

.button.large { padding: 12px 24px; } /* Easy to override */

Use :where() for base component styles so specific classes can override them without specificity wars.

:where Browser Support

Widely available Since 2021 86% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

Common pitfalls

:where() has zero specificity

While this is useful for overrideable styles, it also means even a simple .class selector can override :where() rules. Be aware that any other selector will beat it.

Not the same as :is()

:where() and :is() work the same way, but :where() always has zero specificity while :is() takes the highest specificity of its arguments. Choose based on your cascade needs.