: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

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

Browser Support

The following table will show you the current browser support for the CSS :is() pseudo class.

Desktop
Edge Chrome Firefox Opera Safari
8888787414
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
887963141588

Last updated by CSSPortal on: 1st October 2023