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

: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()

Specificity

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

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

Example. Complex combinations

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

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

• CSS: :has descendant selector

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 list (,)