A selector list is a comma-separated group of selectors that share one declaration block. When several selectors need the same styles, list them once instead of repeating the rule.
Example: h1, h2, h3 { color: navy; } is the same as three separate rules with identical declarations. Spaces around the comma are optional.
Baseline Widely available.
Selector lists are a core CSS feature, long supported in all major browsers.
Warning — one bad selector can drop the whole rule.
If any selector in a normal list is invalid, the browser ignores the entire block. Forgiving lists inside :is() / :where() keep valid selectors working.
Syntax
CSS Syntax
syntax.css
selector1,selector2, … { … }
Equivalent to writing each selector in its own rule with the same declarations.
Stack the list. One selector per line, commas between them.
Mix selector types. Id, class, and element can sit in one list.
Share declarations. Font size applies to every match.
Read easily. Multi-line lists are easier to scan and review.
Edge Cases & Pitfalls
Most grouping bugs come from invalid list items or mixing unrelated styles.
invalid
One invalid selector drops the rule
In a normal list, a typo or unsupported selector invalidates the whole block. Split rules or use :is() / :where() for forgiving lists.
not &
Comma is not a combinator
h1, p does not mean “p inside h1.” For relationships, use space, >, +, or ~.
same styles
Only group identical declarations
If two selectors need different values, keep separate rules. Grouping forces one shared block.
specificity
Each selector keeps its own specificity
Grouping does not average specificity. #id, .class still compete as id vs class when they match the same element.
space
Spaces around commas are optional
h1,h2 and h1, h2 are both valid. Prefer a space after the comma for reading.
Compatibility
Browser Support
Selector list grouping is a browser CSS feature. Node.js, Deno, and Bun do not evaluate selector lists.
✓ Baseline · Widely available
Selector list (,)
Supported in all major browsers for decades (Baseline Widely available since about July 2015).
99%All modern browsers
Google ChromeAll
Full
Mozilla FirefoxAll
Full
Apple SafariAll
Full
Microsoft EdgeAll
Full
OperaAll
Full
Samsung InternetAll
Full
Internet ExplorerAll
Full
sel1, sel2Universally supported
Bottom line: Production-ready. Watch for invalid selectors in a list. Not a server runtime API.
Remember
Key Takeaways
Role: share one declaration block across many selectors.
Form:sel1, sel2, sel3 { … }
Not a combinator: commas do not describe parent/child relationships.
Tip: keep every list item valid, or use forgiving :is() / :where().
One line:A, B, C { … } applies the same styles to every matching selector.
Frequently Asked Questions
A selector list is a comma-separated list of selectors that share one declaration block. Example: h1, h2, h3 { color: navy; } styles all three heading types.
No. Combinators like space, >, +, and ~ describe relationships between elements. A comma only groups independent selectors into one rule.
In a normal rule, one invalid selector makes the whole rule fail. Separate rules, or forgiving lists inside :is() / :where(), keep the valid selectors working.
Yes. Lists can mix any selectors: #hero, .card, article { … }.
Optional. Single-line and multi-line lists are both valid. Multi-line lists are easier to read and review in git diffs.
No. It is a browser CSS selector-list feature, not a Node.js API.
