CSS :is() Grouping Selector - Combine Selector Lists Cleanly

Why :is() Beats Comma Lists

Writing every variant in a comma list works, but the rule is fragile: if any one selector fails to parse, the entire rule is discarded. :is() is forgiving — invalid arguments are ignored without nuking the surrounding declaration.

/* If :unknown breaks parsing, this whole rule is thrown away */
h1, :unknown, h2 { color: red; }

/* :is() drops only the broken arg, keeps h1 and h2 */
:is(h1, :unknown, h2) { color: red; }

Cross-Product Selectors

:is() shines when you would otherwise multiply selectors:

:is(article, aside, nav) :is(h1, h2, h3) {
  font-family: 'Inter Tight', sans-serif;
}

That single rule replaces nine separate descendant selectors. The browser still walks the same tree, so there's no performance gain — only authoring ergonomics.

Specificity Comes From the Most Specific Argument

This is the trap most authors hit:

.btn:is(button, #primary-cta) {
  /* Specificity: (1, 1, 0) — the #id leaks in */
  border-radius: 8px;
}

Even though most matches will be plain <button>s, every match inherits the (1, 1, 0) score because of the ID inside. Keep :is() lists homogeneous in specificity, or reach for :where() when you want flat zero specificity.

Nesting and :is()

CSS Nesting works fine inside :is(). The grouped selector becomes the implicit anchor:

:is(.card, .panel) {
  & > header { padding: 12px 16px; }
}

Browser Support

Chrome 88+, Firefox 78+, Safari 14+. Universal among evergreen browsers since 2021.