CSS: :where selector (is any of)

Selector :where

:where(s1, s2, etc)

match any of the selectors s1, s2 etc.

s can be simple selector, compound selector or complex selector.

.nav a {
 color: red;
}

/* 0 priority. does not override others */
:where(a) {
 color: blue;
}

Example

article :where(h1, h2, h3, h4) {
 scroll-margin-top: 5rem;
}

/* Complex card variations */
.card:is(:has(img), :has(video)) {
 display: grid;
 grid-template-columns: 1fr 2fr;
}

• CSS: :has descendant selector

Specificity

:where() has zero specificity (0,0,0).

Difference between :is() vs :where()

• specificity of :is() is the highest specificity of the selectors inside it.
• specificity of :where() is 0.

Browser support

the selectors :is() and :where() are supported by all major browsers since 2022.