Selector list
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 is 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 }
Specifications
Specification |
---|
Selectors Level 4 # grouping |
Browser compatibility
BCD tables only load in the browser