THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 243

Figure 7-13: Styling every third data column.
h at's all relatively straightforward. Now, what happens when you put a th at the beginning of
each row? In one sense, nothing. h e columns that are selected don't change; you're still
selecting the i rst, fourth, seventh, and so on children of the tr elements. In another sense,
the selected columns are shit ed, because you're no longer selecting the i rst, fourth, seventh,
and so on data columns. You're selecting the third, sixth, and so on data columns. h e i rst
column, which is composed of th element, doesn't get selected at all because the selector only
refers to td elements (see Figure 7-14).
245
Figure 7-14: Disrupting the pattern with row headers.
To adjust, you could change the terms of the :nth-child selector (see Figure 7-15).
td:nth-child(3n+ 2) { background : #EDF ;}
Alternatively, as shown in Figure 7-16, you could keep the original pattern and switch from
using :nth-child to :nth-of-type .
td:nth-of-type(3n+ 1) { background : #FDE ;}