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
 
Search WWH ::




Custom Search