What is the difference between h1, h2, h3 and h1 h2 h3 in style declarations?

CSSJunior~1 min read

The difference is fundamental: it's grouping versus nesting.

The comma means the style applies to each selector separately.

css

h1, h2, h3 {
  color: red;
}

This rule colors all h1, all h2, and all h3, regardless of where they are in the document.

The space means the style applies only to h3, which is inside h2, and h2 - inside h1.

css

h1 h2 h3 {
  color: red;
}

This scenario practically never happens in reality, because the structure:

html

<h1>
  <h2>
    <h3>Text</h3>
  </h2>
</h1>

essentially impossible and violates HTML semantics. That's why such a selector will almost never work.

Notation	What it means	Where it applies
`h1, h2, h3`	a style for each of the selectors	to all `h1`, `h2`, `h3`
`h1 h2 h3`	a style for `h3` nested in `h2`, nested in `h1`	almost never seen

If you need to give several elements a shared style, use a comma, not a space.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.