HTML and CSS Reference
In-Depth Information
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.
Unlike JavaScript and many other programming languages, the series begins at
1
. For example, this selects the
second paragraph within its parent element:
p:nth-of-type(2)
The
nth-last
pseudo-classes count from the end of the parent element. So, use this to select the
penultimate paragraph:
p:nth-last-of-type(2)
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:
tr:nth-child(odd)
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
