Skip to main content

What does the comma , do in selectors?

CSSJunior~1 min read
Suggest an edit

The comma in CSS selectors is used for grouping. It lets you apply the same set of styles to several selectors at once. Each selector on either side of the comma works independently, but the rule is shared.

Example

css
h1, h2, .title { color: red; }

This rule applies to:

  • all h1 tags
  • all h2 tags
  • all elements with the class .title

In other words, the comma works like a logical "OR".

Why this is needed

  • to avoid duplicating code
  • to cover several different elements with one style

Without a comma, you would have to write it like this:

css
h1 { color: red; } h2 { color: red; } .title { color: red; }

Summary

The comma in selectors combines several different selectors into one rule, letting you give them the same style and making CSS shorter and cleaner.

Short Answer

Interview ready
Premium

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

Suggest an edit