Grouping Selector

What if you want the same styles on multiple elements? You could write separate rules for each one, but that means repeating yourself. The grouping selector lets you combine them.

Just separate your selectors with commas.

h1, h2, h3 {
  font-family: Georgia, serif;
  color: #2c3e50;
  margin-bottom: 10px;
}

p, li, .description {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
}

This is the DRY principle — Don't Repeat Yourself. One rule, multiple selectors.

How Grouping Works

Each selector in the comma-separated list gets the exact same styles. It is exactly the same as writing separate rules, but way cleaner.

/* Instead of writing this: */
h1 { color: navy; }
h2 { color: navy; }
h3 { color: navy; }

/* Write this: */
h1, h2, h3 {
  color: navy;
}

Less code, easier to maintain. Change one value, and it updates everywhere.

You Can Group Any Selectors

Mix and match — element selectors, class selectors, ID selectors, all in the same group.

h1, .highlight, #special {
  text-transform: uppercase;
  letter-spacing: 2px;
}