commas in css: grouping selectors

The number of times I’ve had to look up what the comma means in CSS is astounding.

As usual, if I find myself doing something multiple times, it’s a reminder that it’s worth writing down how.

Today, that’s commas. Specifically, it’s how to use a comma in CSS.

Since I don’t use CSS syntax every day, it’s been a slow journey to mastering it. The number of different types of selectors doesn’t help either. But then there’s the comma. It just seems to appear some times and I’m left wondering, what exactly it does!

In fact, while MDN’s CSS First Steps and Building Blocks series reference the use of commas (e.g., in the section Create logical sections in your stylesheet), I couldn’t find a good definition anywhere of what it means.

Take for example these two style definitions:

body p {
  color: blue;
}

vs.

body,
p {
  color: blue;
}

The former is an example of a child selector and applies a color of blue to all paragraph tags that are children of the body. The latter applies a color of blue to body tags or paragraph tags.

The latter then, is simply a terser (though equivalent) way to write the following:

body {
  color: blue;
}
p {
  color: blue;
}

I still don’t know if the comma has an official name, but I’m thinking of it as a “grouper”. It’s a way to say “or” in CSS. The comma isn’t a selector, but a way to group selectors¹.

Footnotes

• ¹ The idea of “grouping” as a way to describe the comma coms from this Lifewire article “Grouping Multiple CSS Selectors”.