Selectors - Selectors, Specificity, and the Cascade - page 5

Grouping Selectors
Let's say you want both h2 elements and paragraphs to have gray text. The easiest way
to accomplish this is to use the following declaration:
h2, p {color: gray;}
By placing the h2 and p selectors on the left side of the rule and separating them with a
comma, you've defined a rule where the style on the right ( color : gray; ) applies to the
elements referenced by both selectors. The comma tells the browser that there are two
different selectors involved in the rule. Leaving out the comma would give the rule a
completely different meaning, which we'll explore later in “Descendant Selec-
tors” on page 24 .
There are really no limits to how many selectors you can group together. For example,
if you want to display a large number of elements in gray, you might use something like
the following rule:
body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray;}
Grouping allows an author to drastically compact certain types of style assignments,
which makes for a shorter style sheet. The following alternatives produce exactly the
same result, but it's pretty obvious which one is easier to type:
h1 {color: purple;}
h2 {color: purple;}
h3 {color: purple;}
h4 {color: purple;}
h5 {color: purple;}
h6 {color: purple;}
h1, h2, h3, h4, h5, h6 {color: purple;}
Grouping allows for some interesting choices. For example, all of the groups of rules
in the following example are equivalent—each merely shows a different way of group-
ing both selectors and declarations:
/* group 1 */
h1 {color: silver; background: white;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
h4 {color: silver; background: white;}
b {color: gray; background: white;}
/* group 2 */
h1, h2, h4 {color: silver;}
h2, h3 {background: gray;}
h1, h4, b {background: white;}
h3 {color: white;}
b {color: gray;}
/* group 3 */
h1, h4 {color: silver; background: white;}
h2 {color: silver;}