HTML and CSS Reference
In-Depth Information
Figure 13-2.
Last row of a table styled using the
:last-child
pseudo-class
A common requirement while working with tables is to show the alternate rows in different colors.
This can be achieved using the
:nth-child
selector. The following CSS selectors apply different styling to
the odd and even rows of a table:
tr:nth-child(odd) {
background-color:#fff;
}
tr:nth-child(even) {
background-color:#808080;
}
Here, all the odd rows have the background color
#fff
and all the even rows have the background
color
#808080
. The resulting table is shown in Figure 13-3.
Figure 13-3.
Odd and even rows of a table with different styles applied using an
:nth-child
pseudo-class
The
odd
and
even
keywords denote odd and even rows, respectively. You can also specify a row
number: for example,
tr:nth-child(2) {…}
. The numbering starts from 1.
The type selectors are similar to child selectors, but they're applicable to siblings of a specified type
rather than children. Consider a case where you have many
<p>
elements and you want the first letter of