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

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

Example.

/* color links */
: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;
}

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 */

they are like selector list, but they 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.

• 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.