CSS: is any of selector (:is, :where)

By Xah Lee. Date: . Last updated: .

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

:is(). Select any of

:is(s1, s2, etc)

lets you group selectors. It matches an element if any of the selectors s1, s2 etc match.

meaning is basically the same as selector list. (see below for difference.) 

:is(h1, h2, h3, h4, h5, h6) {
 color: red;
}

/* above is same as the following */

h1, h2, h3, h4, h5, h6 {
 color: red;
}

note: :is() was named :matches()

Example 2: Complex combinations

/* Style links that are either in nav or are buttons */
:is(nav a, button.link, .card a) {
 color: royalblue;
}

Specificity

:is() takes the highest specificity of the selectors inside it.

/* specificity = 0,1,0 (from #header) */
:is(#header, .nav) a {
 color: red;
}

:where(). Select any of, but 0 specificity

:where(s1, s2, etc)

same as the :is() but contributes zero specificity (0,0,0).

This is very useful for writing non-intrusive base styles that are easy to override.

/* These won't block more specific rules */
:where(a) {
 color: blue;
}

/* This will override the :where() rule easily */
.nav a {
 color: red;
}

More Examples

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;
}

Chaining pseudo-class selector functions

You can combine them. 

article:has(:is(h2, h3)) :where(p) {
 border: solid 1px grey;
}

Difference of :is() vs Selector List

:is() allows you to have nested usage. 

article :is(h1, h2, h3, .title) {
 margin-top: 1.5rem;
}
/* this is NOT possible with normal selector list */

CSS Selector. pseudo-class functions

CSS, Selectors

simple selectors
selector list
relationship selectors (combinators)
special selector
misc