CSS Grouping Selectors

Sometimes several different selectors should look the same. You could repeat the rule for each, or you can write the selectors in one list separated by commas.

Without grouping:

1
2
3

h1 { font-family: Georgia, serif; color: #222; }
h2 { font-family: Georgia, serif; color: #222; }
h3 { font-family: Georgia, serif; color: #222; }

With grouping:

1
2
3
4

h1, h2, h3 {
  font-family: Georgia, serif;
  color: #222;
}

Try it

1
2
3
4
5
6
7
8
9
10

<style>
  h1, h2, .lead {
    color: #1a5276;
    font-family: Georgia, serif;
  }
</style>
<h1>Main heading</h1>
<h2>Section heading</h2>
<p class="lead">A lead paragraph with the same color and font.</p>
<p>A normal paragraph, unchanged.</p>

You can mix element names, classes and IDs in one group.

One rule is not a shortcut for two

A comma means “or”. Each selector in the list is checked on its own. If you want to separate rules later, you can pull one selector out into its own rule and change it alone.

1
2

h1, h2, h3 { color: #222; }
h1 { font-size: 2.5rem; } /* only h1 gets this */