The CSS selector list (,
) selects all the matching nodes.
/* Selects all matching elements */ span, div { border: red 2px solid; }
To reduce the size of style sheets, one can group selectors in comma-separated lists.
Syntax
element, element, element { style properties }
Examples
Single Line Grouping
Grouping selectors in a single line using a comma-separated lists.
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
Multi Line Grouping
Grouping selectors in a multiple lines using a comma-separated lists.
#main, .content, article { font-size: 1.1em; }
Selector list invalidation
A downside to using selector lists is that the following aren't equivalent:
h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif }
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
This is because a single unsupported selector in a selector list invalidates the whole rule.
A way to remedy this us to use the :is()
selector, which simply ignores invalid selectors in its arguments, but at the cost of all selectors having the same specificity, because of how :is()
calculates specificity.
h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif }
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'Selector Lists' in that specification. |
Working Draft | Renamed to "selector list" |
CSS Level 1 The definition of 'grouping' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Selector list (, ) | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support