CSS: :is any of selector

:is(). Select any of

:is(s1, s2, etc)

match any of the selectors s1, s2 etc.

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

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

/* above is same as the following */

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

Example.

/* color links */
:is(nav a, .card a) {
 color: royalblue;
}

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

Specificity

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

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

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.

it is like selector list, but it represent selector list as a single syntactic unit, so it can be used as part of other selector expression, such as in child selector >, to obtain rich meaning.

/* this is impossible with normal selector list */
article :is(h1, h2, h3, .title) {
 color: red;
}

• CSS: selector list (,)

Selector list vs :where() :is()

• CSS: Selector list vs :where() :is()

browser support

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