HTML and CSS Reference
In-Depth Information
Using the formula -n+ b has the effect of selecting the first b elements. For example, the following selector
sets the background color of the first three table rows to red:
tr:nth-child(−n+3) {
background-color: #F00;
Understanding how to use the pseudo-classes in Table 13-2 can be a challenge. The following exercises
should help clarify how they work.
eXercISe: StYLING aLterNate taBLe cOLUMNS
In this exercise, you'll use Css3 pseudo-classes to apply a different background color to table headers and
alternate columns without the need for extra markup in the HTMl. Use nth-of-type_cols_begin.html in the
ch13 folder as your starting point. The finished table is in nth-of-type_cols_end.html.
The table has already been given some basic styles in the <head > of the page to
prevent the text from wrapping inside table cells and headers and to adjust padding
and spacing (styling tables is the subject of Chapter 14). However, the table looks
quite plain (see Figure 13-3 ).
Figure 13-3. The table is nicely laid out, but lacks interest
Browsers apply backgrounds to table elements in a specific order beginning with the
table itself (the details are in “How Browsers lay out Tables” in Chapter 14). give
the whole table a background color by amending the table rule like this:
table {
border-collapse: collapse;
margin-left: 50px;
background-color: #DED68B;
The first row and column act as labels for the data in the table, so should be styled
differently. Although you could use pseudo-classes to identify the first row and
Search WWH ::

Custom Search