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.
Code Comparison
✕ Old
6 lines
1.card h1, .card h2, .card h3, .card h4 {
2 margin-bottom: 0.5em;
3}
// Same prefix repeated for every selector
2 margin-bottom: 0.5em;
3}
// Same prefix repeated for every selector
✓ Modern
3 lines
1.card :is(h1, h2, h3, h4) {
2 margin-bottom: 0.5em;
3}
2 margin-bottom: 0.5em;
3}
Why the modern way wins
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.
Browser Support
96%
Lines Saved
6 → 3
50% less code
Old Approach
Repeated selectors
.card h1, .card h2, ...
Modern Approach
:is() group
One prefix, list of targets
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).