Web Design Garage

Mixing It Up

CSS is flexible enough to apply the same style definition to multiple selectors of different types. Simply separate the selectors with commas. Take this example:

p, h1, h2 + h3, td > strong {
  color: #FF0000;
}

This style rule applies to all paragraphs, all first-level heads, all third-level-head siblings of second-level heads, and all strong-tag children of table cells. It turns all these elements red.

The following style sheet has the same effect, but it isn't nearly as concise:

p {
  color: #FF0000;
}

h1 {
  color: #FF0000;
}

h2 + h3 {
  color: #FF0000;
}

td > strong {
  color: #FF0000;
}

By all means, use the long form if it helps you to keep the styles straight in your head. But once you get accustomed to the ways of CSS, remember ...