CSS Selector List

A CSS selector list groups two or more selectors separated by commas. The declarations in the rule are applied to every element matched by any selector in the list, allowing the same styles to be shared without repeating the declaration block.

Syntax

A selector list consists of two or more selectors separated by commas:

selector1, selector2, selector3 {
  property: value;
}

For example, the following rule applies the same text color to <h1>, <h2>, and <h3> elements:

h1, h2, h3 {
  color: #0088cc;
}

How a Selector List Works

Each selector in the list is evaluated independently. An element only needs to match one of the selectors for the declarations in the rule to apply.

h2, .highlight, #notice {
  color: #0088cc;
}

This rule applies to every <h2> element, every element with the highlight class, and the element with the notice ID.

Grouping Selectors

Selector lists are commonly used when several selectors need the same declarations. Grouping them into one rule reduces repeated CSS and makes related styles easier to maintain.

Instead of writing separate rules:

h1 {
  font-family: Arial, Helvetica, sans-serif;
}
h2 {
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  font-family: Arial, Helvetica, sans-serif;
}

The selectors can be grouped into one selector list:

h1, h2, h3 {
  font-family: Arial, Helvetica, sans-serif;
}

Using Complex Selectors

The selectors in a selector list do not have to be simple selectors. A list can contain compound selectors, complex selectors, attribute selectors, pseudo-classes, and other valid selectors.

.card h2, article > p, a[href$=".pdf"] {
  color: #0088cc;
}

Each comma separates one complete selector from the next. The declarations apply to elements matched by any of the selectors in the list.

Invalid Selectors

A regular selector list is unforgiving. If one selector in the list is invalid or unsupported by the browser, the entire selector list is invalid and the rule is ignored.

h1, h2, invalid??selector {
  color: #0088cc;
}

In this example, the invalid selector causes the entire rule to be discarded. Forgiving selector lists used by certain functional pseudo-classes, such as :is() and :where(), follow different parsing rules.

Specificity

A selector list does not have one combined specificity value. Each selector in the list retains its own specificity, and the specificity of the selector that matches the element is used when resolving competing declarations.

Selector	Specificity
`h2`	`0-0-1`
`.highlight`	`0-1-0`
`[data-status="active"]`	`0-1-0`
`#notice`	`1-0-0`

For example, in h2, .highlight, #notice, each selector keeps its own specificity rather than the three values being added together.

Selector List Example

The following example groups a type selector, class selector, and ID selector. Each matching element receives the same background color, text color, and font weight.

h2, .highlight, #notice {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Selector lists can contain different types of selectors and can also be used with combinators to create more specific matching patterns:

Specifications

Selector lists are defined in the Selectors Level 4 specification.

CSS Selector List