Selector Lists

CSS Selector Lists

A CSS selector list allows two or more selectors to share the same group of CSS declarations. The selectors are separated by commas, making it possible to apply the same styles without writing a separate rule for each selector.

Selector List Syntax

A selector list contains multiple selectors separated by commas. The declarations inside the rule apply to every selector in the list.

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

This rule contains three selectors: h1, h2, and h3. The browser applies the color declaration to elements matching any of these selectors.

Without a Selector List

Without a selector list, the same declaration would have to be repeated in separate CSS rules.

h1 {
  color: #0088cc;
}

h2 {
  color: #0088cc;
}

h3 {
  color: #0088cc;
}

Because all three rules contain the same declaration, they can be combined into one selector list.

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

Both versions can produce the same result, but the selector list avoids repeating the same CSS declaration.

Grouping Element Selectors

Element selectors are commonly placed in selector lists when several types of HTML elements should share the same styles.

h2, h3, p {
  color: blue;
}

<h2>Second-Level Heading</h2>
<h3>Third-Level Heading</h3>
<p>This is a paragraph.</p>

Each element matches one of the selectors in the list, so all three receive the blue text color.

Combining Different Selector Types

The selectors in a selector list do not have to be the same type. Element, class, ID, and other selectors can appear in the same list.

h2, .notice, #message {
  color: green;
}

<h2>Page Heading</h2>
<p class="notice">This is a notice.</p>
<p id="message">This is a message.</p>

The heading matches h2, the first paragraph matches .notice, and the second paragraph matches #message. Each receives the same green text color.

The Comma is Important

A comma separates independent selectors in a selector list. Removing the comma can completely change what the selector means.

h2, p {
  color: blue;
}

The selector h2, p selects both <h2> and <p> elements.

h2 p {
  color: blue;
}

The selector h2 p does not mean the same thing. The space creates a descendant selector, which looks for <p> elements that are descendants of an <h2> element.

Commas and spaces therefore have very different meanings in CSS selectors. Descendant selectors are covered in the next tutorial.

Shared and Individual Styles

A selector list can provide styles that several elements share, while separate rules provide styles needed by individual elements.

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

h1 {
  font-size: 36px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 22px;
}

All three heading levels share the same font family and text color, while each heading level receives its own font size. This avoids repeating the shared declarations while still allowing each element to have individual styling.

Formatting Selector Lists

Short selector lists can be written on one line. Longer lists are often easier to read when each selector is placed on its own line with a comma separating the selectors.

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

The formatting does not change which elements are selected. It simply makes longer selector lists easier to read and maintain.

When to Use Selector Lists

Selector lists are useful when several different selectors need exactly the same declarations. Grouping those selectors into one rule can reduce repeated CSS and make shared styles easier to update.

If the selectors require different declarations, separate rules are usually clearer. A selector list should represent styles the selected elements genuinely have in common rather than grouping unrelated rules simply to reduce the number of lines in a stylesheet.

Summary

A CSS selector list contains two or more selectors separated by commas. Every selector in the list shares the declarations contained within the CSS rule.

Selector lists can contain element, class, ID, and other selector types. They are useful for reducing repeated CSS when different elements need the same styles. The next tutorial covers descendant selectors, where a space between selectors describes a relationship between elements instead of separating independent selectors.