:is() CSS Pseudo Class

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;

}