Selector list
The CSS selector list (,
) selects all the matching nodes. A selector list is a comma-separated list of selectors.
Description
When multiple selectors share the same declarations, they can be grouped together into a comma-separated list. Selector lists can also be passed as parameters to some functional CSS pseudo-classes. White space may appear before and/or after the comma.
The following three declarations are equivalent:
css
span {
border: red 2px solid;
}
div {
border: red 2px solid;
}
css
span,
div {
border: red 2px solid;
}
css
:is(span, div) {
border: red 2px solid;
}
Examples
When applying the same styles to elements matching different criteria, grouping the selectors in a comma-separated list can improve consistency while reducing the size of style sheets.
Single line grouping
This example shows grouping selectors in a single line using a comma-separated list.
css
h1, h2, h3, h4, h5, h6 {
font-family: helvetica;
}
Multi line grouping
This example shows grouping selectors in multiple lines using a comma-separated list.
css
#main,
.content,
article,
h1 + p {
font-size: 1.1em;
}
Valid and invalid selector lists
An invalid selector represents, and therefore matches, nothing. When a selector list contains an invalid selector, the entire style block is ignored, except for the :is()
and :where()
pseudo-classes that accept forgiving selector lists.
Invalid selector list
A downside to using a selector list is that a single unsupported selector in the selector list invalidates the entire rule.
Consider the following two CSS rule sets:
css
h1 {
font-family: sans-serif;
}
h2:invalid-pseudo {
font-family: sans-serif;
}
h3 {
font-family: sans-serif;
}
css
h1,
h2:invalid-pseudo,
h3 {
font-family: sans-serif;
}
They are not equivalent. In the first rule set, styles will be applied on the h1
and h3
elements, but the h2:invalid-pseudo
rule will not be parsed. In the second rule set, because one selector in the list is invalid, the entire rule will not be parsed. Because of this, no style will be applied to the h1
and h3
elements as when any selector in a list of selectors in invalid, the entire style block will be ignored.
Forgiving selector list
A way to remedy the invalid selector list problem is to use the :is()
or the :where()
pseudo-class, which accept a forgiving selector list. Each selector in a forgiving selector list is parsed individually. So any invalid selectors in the list are ignored and the valid ones are used.
Carrying on from the previous example, the following two CSS rule sets are now equivalent:
css
h1 {
font-family: sans-serif;
}
h2:maybe-unsupported {
font-family: sans-serif;
}
h3 {
font-family: sans-serif;
}
css
:is(h1, h2:maybe-unsupported, h3) {
font-family: sans-serif;
}
The difference between the two is that the specificity of :is()
is its most specific argument, whereas the :where()
selector and the forgiving selector list parameter do not add any specificity weight.
Relative selector list
A relative selector list is a comma-separated selector list parsed as relative selectors, which begin with an explicit or implied combinator.
css
h2:has(+ p, + ul.red) {
font-style: italic;
}
In the above example, the italic style will be applied to any h2
heading that is immediately followed by <p>
or <ul class="red">
. Note that pseudo-elements and the :has()
selector are not valid within the :has()
relative selector list.
Specifications
Specification |
---|
Selectors Level 4 # grouping |
Browser compatibility
BCD tables only load in the browser
See also
- The
:is()
and:where()
pseudo-classes accept forgiving selector lists. - The
:not()
pseudo-class accepts a regular selector list - The
:has()
pseudo-class accepts a relative selector list. - CSS selectors