HTML and CSS Reference
To use these pseudo-classes, you pass a value to the parentheses indicating the position in the series that
you want to select. The value can be a number, a keyword, or a formula.
Using a Number to Specify the Position
Passing a number to one of the pseudo-classes in Table 13-2 selects the element at that position in the series.
second paragraph within its parent element:
The nth-last pseudo-classes count from the end of the parent element. So, use this to select the
Using a Keyword
The two keywords that you can use with the pseudo-classes are odd and even .
The following selects every odd-numbered row in a table:
If you add or remove a row from the table, the browser automatically adjusts the styles. This is a huge time-
saver for adding a different background color to alternate table rows.
Specifying a Recurring Sequence
You can select a recurring sequence of elements, such as every third table row, by using the formula an± b , in
which a and b are numbers and n is the literal character.
The simple way to understand the formula is to treat n as zero and increment it by one throughout the series.
For example, tr:nth-child(3n+ 1) selects the first, fourth, and seventh table rows like this:
(3 × 0) + 1 = 1
(3 × 1) + 1 = 4
(3 × 2) + 1 = 7
Similarly, tr:nth-child(5n+ 2) selects the second, seventh, and twelfth rows:
(5 × 0) + 2 = 2
(5 × 1) + 2 = 7
(5 × 2) + 2 = 12
If the minus sign follows n , the second value is deducted from the first. Values less than one are ignored. So,
tr:nth-child(5n-2) selects the third, eighth, and thirteenth rows.
(5 × 0) - 2 = −2 /* ignored */
(5 × 1) - 2 = 3
(5 × 2) - 2 = 8
(5 × 3) - 2 = 13