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