Grouping selectors without repetition
Repeating .card h1, .card h2, .card h3 is verbose. :is(h1, h2, h3, h4) under .card does the same in one rule.
2 margin-bottom: 0.5em;
3}
2 margin-bottom: 0.5em;
3}
// Same prefix repeated for every selector
Browser Support for :is()
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
No repetition
Write the shared part once. Add or remove items in the list without duplicating the prefix.
Easier to read
Intent is clear: these headings inside .card get the same style.
Takes specificity of argument
:is() uses the highest specificity in its list. Good to know when overriding.
How it works
The old way was to list every combination: .card h1, .card h2, .card h3, .card h4. Same prefix over and over. Adding h5 meant another comma and another .card h5.
.card :is(h1, h2, h3, h4) means .card plus any one of those. One prefix, one list. Change the list without touching the rest. :is() also keeps specificity predictable (the most specific selector in the list wins).