The CSS :is() pseudo-class is used to group multiple selectors and apply the same styles to any element that matches at least one of them. It helps reduce repetition and makes complex selectors cleaner and easier to maintain.
The modern :is() pseudo-class simplifies complex groupings, improves parser resilience, and changes selector specificity rules.
Avoid repeating ancestors or sibling pathways. Group complex multi-layered tags in single-line statements to keep stylesheets extremely compact.
Normally, one invalid selector fails an entire styling rule. Inside :is(), the browser skips bad arguments
and applies others safely.
Instead of dynamic elements, the specificity matches the heaviest argument inside the parenthetical list. Learn to predict and prevent cascade bugs.
Look at how drastically the nesting structure shrinks when converting standard CSS lists into modern, clean selector lists.
Standard nesting often results in long, repetitive selector chains that are annoying to maintain.
Note: By nesting :is(), you can group both the parents and the children,
cutting the code size down and making changes a single-line update.
.main-content h1,
.main-content h2,
.sidebar h1,
.sidebar h2,
.footer h1,
.footer h2 {
color: #1e293b;
}:is(.main-content, .sidebar, .footer) :is(h1, h2) {
color: #1e293b;
}
Normally, browser bugs or unsupported experimental selectors break entire CSS rule blocks.
:is() resolves this immediately.
Note: The CSS parser treats lists inside :is() as forgiving, meaning
standard entries still style perfectly if vendor prefixes fail.
/* If browser rejects any-link, */
/* standard hover styling breaks! */
a:hover,
a:-webkit-any-link:hover {
text-decoration: underline;
}/* Invalid selectors inside list */
/* are skipped without failures. */
:is(a, a:-webkit-any-link):hover {
text-decoration: underline;
}:is()
Playground
Write or select selectors to watch elements match in real-time. Toggle between the live styled web interface and raw HTML representation to inspect exactly how selection operates.
header a,
footer aWrite compact, forgiving selectors without duplication.
DRY your stylesheets with single-line lists.
Invalid selectors inside :is() do not break the whole rule.
Takes the specificity of its most specific argument.
Normally, if a single selector in a comma-separated list is invalid or unsupported, the browser **discards the
entire CSS rule**. With :is(), lists are parsed
leniently, meaning invalid selectors are skipped while valid ones keep working perfectly.
Unforgiving browser parsing
/* One unsupported breaks EVERYTHING */
a:hover,
a:-invalid-vendor-selector {
color: #3b82f6;
font-weight: 600;
}:-invalid-vendor-selector, it
drops the entire rule block including a:hover.Forgiving selector parsing
:is(
a,
a:-invalid-vendor-selector
):hover {
color: #4f46e5;
font-weight: 600;
}a:hover. This is perfect
for forward-compatible stylesheets!:is(), bundling
modern experiments alongside defaults has never been safer.:is() Specificity Works
In CSS, the specificity of :is() is not based
on what it actually matches. Instead, it gets the specificity of its **most specific (heaviest) argument**,
regardless of which selector matches the element.
:is(h1, #featured-id), even when matching a simple
<h1> element, it will carry the extreme ID-level
specificity of #featured-id!
:is(section, #featured) p
:is()
Highest Winsp