HTML and CSS Reference
In-Depth Information
You could use :nth-child(1) , :nth-child(2) , :nth-child(3) , and so on to
apply a style to each row in the table in order, but that would be as
much work as adding a class to each row. Instead of specifying a num-
ber as the parameter to :nth-child , you can specify a pattern. Let's look
at that next.
To select every second element, use the
pattern 2n :
li:nth-child(2n) {
background-color: #000;
}
If you imagine that all the elements are
numbered in order, this selects all the <li>
elements with a number that matches the
pattern 2n for whole number values of n .
Selecting the odd-numbered children this
way looks a little more complex but follows
the same pattern:
li:nth-child(2n-1) {
background-color: #000;
}
The odd-and-even requirements are so
common that there's a shortcut keyword
for each. This creates a red-and-blue
striped list:
li:nth-child(odd) {
background-color: #f00;
}
li:nth-child(even) {
background-color: #006;
}
Search WWH ::




Custom Search