Grouping and Compound Selectors

Suppose the heading, the paragraphs and the list items of the hiking page should all use the Arial font. Writing three rules with the same declaration works, but each later change must then be made three times. CSS offers two ways to join simple selectors into one selector, and they do opposite things: a comma joins selectors so that a rule matches more elements, while writing selectors together with no space makes a rule match fewer.

Grouping Selectors With a Comma

A selector list, also called a group, is several selectors separated by commas. The rule applies to every element that matches any one of them.

h1,
p,
li {
  font-family: Arial, sans-serif;
}

This rule is exactly equivalent to three separate rules for h1, p and li with the same declaration. Writing each selector on a separate line, as above, keeps a long group easy to read. On the hiking page, the group matches the heading, both paragraphs and all three list items.

Each selector in the group keeps its own specificity. The h1 part counts as (0, 0, 1) when it competes with another rule for the heading, exactly as if it had been written alone.

One Invalid Selector Drops the Whole Group

A group has one risk. If any selector in the list is invalid, the browser ignores the entire rule, including the valid selectors. In the following rule, :hovr is a misspelling of a state selector that a later chapter covers.

h1, p:hovr {
  text-transform: uppercase;
}

The heading does not become uppercase, even though h1 is valid. When a grouped rule seems to have no effect at all, check every selector in the list for a typo.

Combining Selectors With No Space

When you write two simple selectors together with no space between them, the element must match both. The resulting selector is called a compound selector. The selector li.important matches an element that is an <li> and also has the class important.

Here is the full hiking page with a grouped rule and two compound selectors.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hiking Guide</title>
  <style>
    h1,
    p,
    li {
      font-family: Arial, sans-serif;
    }

    h1 {
      color: darkgreen;
    }

    li.important {
      color: darkred;
      background-color: lightyellow;
      font-weight: bold;
    }

    .important {
      color: white;
      background-color: darkred;
      padding: 4px 8px;
    }

    .important.large {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>A Beginner's Hiking Guide</h1>
  <p>Pick a short trail for your first walk.</p>
  <p class="important large">Carry more water than you think you need.</p>
  <ul>
    <li class="important">Water</li>
    <li>Map</li>
    <li class="large">Rain jacket</li>
  </ul>
</body>
</html>

The browser computed these values:

p.important.large   color rgb(255, 255, 255)  background rgb(139, 0, 0)      font-size 24px
li.important        color rgb(139, 0, 0)      background rgb(255, 255, 224)  bold
li.large            color rgb(0, 0, 0)        background transparent         font-size 16px

Follow the three results in order. The paragraph has both classes, so .important.large matches it and sets 24px. The "Rain jacket" item has large but not important, so the same selector skips it and the item stays at 16px. The "Water" item matches both li.important and .important, and the compound selector wins the color and the background.