Skip to main content

Selector Grouping

By Adam Roberts



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

We can group selectors using a comma (,) separator. The following declaration block will apply to any element that matches either of the selectors in the group:

td, th {
  ⋮ declarations

We can think of the comma as a logical OR operator, but it’s important to remember that each selector in a group is autonomous. A common beginner’s mistake is to write groups like this:

#foo td, th {
  ⋮ declarations

A beginner might think that the above declaration block will be applied to all td and th elements that are descendants of the element with an ID of “foo”. However, the selector group above is actually equivalent to this:

#foo td {
  ⋮ declarations
th {
  ⋮ declarations

To achieve the true goal, write the selector group as follows:

#foo td, #foo th {
  ⋮ declarations

Important: No Trailing Comma Needed
Don’t leave a comma after the last selector in the group!

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Get practical advice to start your career in programming!

Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs