CSS: Grouping Selectors

Look at the CSS code written below:

h1 { text-align: left; color: #0000ff; }
h2 { text-align: left; color: #0000ff; }
h3 { text-align: left; color: #0000ff; }

Noticed something? Although there are three different selectors (“h1“, “h2” and “h3“), they all use the same properties and values.

To avoid writing three different pieces of code, CSS allows you to group the selectors together so that one piece of code as the one below will produce the same output:

h1, h2, h3 { text-align: left; color: #0000ff; }