Simplify CSS Selectors with :is() and :where() for Cleaner Code

When writing CSS, developers often use long selector lists to apply the same rules to multiple elements, such as styling

<b>

tags inside headings. The traditional approach looks like this:

<code>h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}</code>

Using the

:is()

pseudo‑class, the code can be reduced and its readability improved:

<code>:is(h1, h2, h3, h4, h5, h6) > b {
  color: hotpink;
}</code>

Browser Compatibility

The

:is()

function originated from

:match()

. Some browsers implement a private

:any()

that provides part of

:is()

's functionality. Before using

:is()

, check its compatibility:

:is() and :where()

The

:is()

pseudo‑class accepts a selector list as its argument and matches any element that any of those selectors would match. The

:where()

pseudo‑class works the same way but has a different selector specificity. Below are several examples illustrating their usage:

<code>/* at the beginning */
:where(h1, h2, h3, h4, h5, h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header, footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button, a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button, a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1, h2):where(.hero, .subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1, h2, :is(.header, .boldest)) {
  font-weight: 900;
}</code>

Finally, the following diagram helps visualize how

:is()

works:

References:

https://css-tricks.com/css-is-and-where-are-coming-to-browsers/

https://web.dev/css-is-and-where/

https://developer.mozilla.org/en-US/docs/Web/CSS/:is