:is() CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The :is() pseudo-class is a CSS selector introduced in CSS Selectors Level 4. It is used to target elements that match any of the provided selectors within the parentheses. This pseudo-class is especially useful when you want to apply the same styles to multiple selectors without having to repeat the styles for each individual selector.

Here's a brief example of how the :is() pseudo-class can be used:

:is(h1, h2, h3) {

  color: blue;

}

In this example, the styles inside the curly braces will be applied to any <h1>, <h2>, or <h3> elements, effectively saving you from writing separate rules for each heading level.

The :is() pseudo-class improves code readability and maintainability by reducing redundancy in your CSS code, making it easier to manage styles for multiple elements that share common styling rules.

Syntax

:is(<forgiving-selector-list>) {
  /* ... */
}

Example

HTML

<ol>

  <li>Saturn</li>

  <li>

    <ul>

      <li>Mimas</li>

      <li>Enceladus</li>

      <li>

        <ol>

          <li>Voyager</li>

          <li>Cassini</li>

        </ol>

      </li>

      <li>Tethys</li>

    </ul>

  </li>

  <li>Uranus</li>

  <li>

    <ol>

      <li>Titania</li>

      <li>Oberon</li>

    </ol>

  </li>

</ol>

CSS

ol {

  list-style-type: upper-alpha;

  color: darkblue;

}



/* stylelint-disable-next-line selector-pseudo-class-no-unknown */

:is(ol, ul, menu:unsupported) :is(ol, ul) {

  color: green;

}



:is(ol, ul) :is(ol, ul) ol {

  list-style-type: lower-greek;

  color: chocolate;

}