HTML and CSS Reference
In-Depth Information
7. There are six columns, so setting their width to
16%
leaves
4%
over. Add that to the
first column by using the
:first-child
pseudo-class, which is understood by all
browsers except IE 6. Add the following style rule to the page:
th:first-child {
width: 20%;
}
The table now has evenly distributed data columns that have alternate background colors in all modern
browsers. Although IE 8 and earlier don't apply the alternate colors, the table still looks much better than
without any background at all.
The preceding exercise showed a simple use of
:nth-of-type()
using the
even
keyword. The next exercise
demonstrates a slightly more complex example, using the
an±
b
formula to apply three different background
colors in sequence to table rows.
eXercISe: StYLING taBLe rOWS IN SeQUeNce
In this exercise, you'll use the
:nth-child()
pseudo-class with the
ab±
b
formula to apply different colors
to the rows in the table from the preceding exercise. Use as your starting point nth-child_rows_begin.html
in the ch13 folder. The file is the same as at the end of the preceding exercise, but with the style for the
background color of alternate columns removed. The finished table is in nth-child_rows_end.html.
1.
The data cells currently inherit the light mustard background color from the table.
This provides a fallback for older browsers that don't understand the Css3 pseudo-
classes. The second row contains the first row of data. To create a sequence of three
background colors from light to dark, the lightest color needs to be applied to the
second, fifth, and eight rows using the following style:
tr:nth-child(3n+2) {
background-color: #DED68B; /*light */
}
2.
Apply the medium background color to the third, sixth, and ninth rows like this:
tr:nth-child(3n+3) {
background-color: #B7B173; /* medium */
}
3. The darkest color needs to be applied to the fourth, seventh, and ninth rows. The
correct formula for this is
3n+
1
, but that also applies to the first row. However,
browsers apply the background to individual cells last of all. As a result, the dark
brown background of the
<th>
cells overrides the colors applied to the rows. Just
add the following style to the page:
tr:nth-child(3n+1) {
background-color: #918C5B; /* dark */
}
4.
save the page, and view it in a browser. In all modern browsers, it looks like
Figure
13-5
.
