The comma in a CSS selector is just a separator that separates multiple selectors that have the same styles.

For example, if you wrote:

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

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 drawbacks to writing it this way:

  1. If in the future, you decide to change the font color of these properties to blue, you have to make that change four times in your style sheet.
  2. It adds a lot of extra characters to your style sheet that you don’t need.

Instead, you can combine all these styles into one style property, by separating the selectors with a comma:

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

Some people, to make the CSS more legible, separate each selector on its own line:

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

By using commas between your selectors, you create a more compact style sheet that’s easier to update in the future.

Posted in: CSS

Related FAQ's

Marius Ion ANGEL HOT SOFT LLC (800) 316-7677