: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!

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