What Is the Comma for in CSS Selectors?

Why a Simple Comma Simplifies Coding

CSS, or Cascading Style Sheets, are the web design industry's accepted way to add visual styles to a site. With CSS, you can control page layout, colors, typography, background image, and much more. Basically, if it is a visual style, then CSS is the way to bring those styles to your website.

As you add CSS styles to a document, you may notice that the document begins to get longer and longer. Even a small site with only a handful of pages can end up with a sizable CSS file - and a very large site with lots and lots of pages of unique content can have very big CSS files.

This is compounded by responsive sites that have lots of media queries included in the style sheets to change how the visuals look and the page lays out for different screens.  

Yes, CSS files can get lengthy. This is not a major problem when it comes to site performance and download speed, because even a lengthy CSS file is likely to be pretty small (since it is really just a text document). Still, every little bit counts when it comes to page speed, so if you can make your style sheet leaner, that is a good idea. This is where the "comma" can come in very handy in your style sheet!

Commas and CSS

You may have wondered what role the comma plays in CSS selector syntax. As in sentences, the comma brings clarity—not code—to the separators. The comma in a CSS selector separates multiple selectors within the same styles.

For example, let's look at some CSS below.

th { color: red; }
td { color: red; }
p.red { color: red; }
div#firstred { color: red; }

With this syntax, you are saying that you want th tags, td tags, paragraph tags with the class red, and the div tag with the ID firstred all to have the style color red.

This is perfectly acceptable CSS, but there are two significant drawbacks to writing it this way:

  • In the future, if you decide to change the font color of these properties to blue, you have to make that change four times in your style sheet.
  • It adds a lot of extra characters to your style sheet that you don’t need. These 4 styles may not seem like overkill, but if you continue doing this across your entire style sheet, the lines will add up and that sheet will be much, much bigger than it needs to be.

To can avoid these drawbacks, and to streamline your CSS file, we will try using commas.

Using Commas to Separate Selectors

Instead of writing 4 separate CSS selectors and 4 rules, you can combine all these styles into one  rule property by separating the individual selectors with a comma. Here is how that would be done:

th, td, p.red, div#firstred { color: red; }

The comma character basically acts as the word "and" inside the selector. So this applies to th tags AND td tags AND paragraph tags with the class red AND the div tag with the ID firstred.  That is exactly what we had before, but instead of needing 4 CSS rules, we have a single rule with multiple selectors. This is what the comma does in the selector, it allows us to have multiple selectors in one rule.

Not only does this approach make for leaner, cleaner CSS files, it also makes future updates so much easier. Now if you wanted to change the color from red to blue, you only have to make the change in one location instead of across the original 4 style rules we had!

Think about these time savings across an entire CSS file and you can see how this will save you both time and space in the long rune!

Syntax Variation

Some people choose to make the CSS more legible by separating each selector on its own line, instead of writing it all on one line as above. This is how that would be done:

th,
td,
p.red,
div#firstred
{
  color: red;
}

Notice that you place a comma after each selector and then use "enter" to break the next selector onto its own line. You do NOT add a comma after the final selector.

By using commas between your selectors, you create a more compact style sheet that’s easier to update in the future and that is easier to read today!

Original article by Jennifer Krynin. Edited by Jeremy Girard on 5/8/17