: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 | |||||
88 | 88 | 78 | 74 | 14 |
Tablets / Mobile | |||||
88 | 79 | 63 | 14 | 15 | 88 |
Last updated by CSSPortal on: 1st October 2023