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.
element, element, element { style properties }
Grouping selectors in a single line using a comma-separated lists.
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
Grouping selectors in a multiple lines using a comma-separated lists.
#main, .content, article { font-size: 1.1em; }
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()
or :where()
selectors, which accept a forgiving selector list. This will ignore invalid selectors in the list but accept those which are valid.
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 }
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Selector list (, ) |
1 | 12 | 1 | 3 | 3.5 | 1 |
Mobile | ||||||
---|---|---|---|---|---|---|
Selector list (, ) |
≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list