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:

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

Using the :is() pseudo‑class, the code can be reduced and its readability improved:

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

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:

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

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