HTML and CSS Reference
In-Depth Information
SELECTING AN ELEMENT BY ITS ORDERING
What if you don't want to select just the
first or last child? With
:nth-child
you can
easily select specific elements by specify-
ing a numeric parameter:
li:nth-child(3), li:nth-child(5) {
background-color: #000;
}
The
:first-child
pseudo-class is just a
more intuitive way of saying
:nth-
child(1)
.
Often you want to select, not individual elements out of a set, but a subset
of the elements according to some repeating pattern. A common example is
large tables of data in which it's helpful to give the rows alternating
background colors to aid the eye as it tracks across the values.
These examples were taken from
the 2010 Commonwealth Games
website (left) and the admin pages
of my own blog (right). The
markup for the two is remarkably
similar—each gives a specific class
to each
<tr>
element in the table.
<table>
<tr class="odd">...
<tr class="even">...
<tr class="odd">...
<tr class="even">...
<tr class="odd">...
<tr class="even">...
