# Understanding `:nth-child`

Pseudo-class
Expressions

CSS3 provides four powerful pseudo-classes that allow the CSS designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it’s easy once you get the hang of it. The pseudo-classes are:

The argument, N, can be a keyword, a number, or a number expression of the form an+b.

These pseudo-classes accept the keywords odd, for selecting odd-numbered elements, and even, for selecting even-numbered elements.

If the argument N is a number, it represents
the ordinal position of the selected element. For example, if the argument
is `5`

, the fifth element will be selected.

The argument N can also be given as
an+b, where
a and b are integers
(for example, `3n+1`

).

In that expression, the number b represents
the ordinal position of the first element that we want to match, and the
number a represents the ordinal number of every
element we want to match after that. So our example expression
`3n+1`

will match the first element, and every third
element after that: the first, fourth, seventh, tenth, and so on. The
expression `4n+6`

will match the sixth element and every
fourth element after that: the sixth, tenth, fourteenth, and so on. The
keyword value odd is equivalent to the expression
`2n+1`

.

If a and b are
equal, or if b is zero,
b can be omitted. For example, the expressions
`3n+3`

and `3n+0`

are equivalent to
`3n`

—they refer to every third element. The keyword value
even is equivalent to the expression
`2n`

.

If a is equal to `1`

, it can
be omitted. So, for example, `1n+3`

can be written as
`n+3`

. If a is zero, which
indicates a non-repeating pattern, only the element
b is required to indicate the ordinal position
of the single element we want to match. For example, the expression
`0n+5`

is equivalent to `5`

, and as we saw
above, it’ll match the fifth element.

Both a and b can be negative, but elements will only be matched if N has a positive value. If b is negative, replace the + sign with a - sign.

If your head’s spinning by now, you’re not alone, but hopefully Table 1 will help put things into perspective. The expression represents a linear number set that’s used to match elements. Thus, the first column of the table represents values for n, and the other columns display the results (for N) of various example expressions. The expression will match if the result is positive and an element exists in that position within the document tree.

n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
---|---|---|---|---|---|---|

0 | 1 | 1 | 4 | - | - | 3 |

1 | 3 | 5 | 8 | 4 | 3 | 2 |

2 | 5 | 9 | 12 | 8 | 8 | 1 |

3 | 7 | 13 | 16 | 12 | 13 | - |

4 | 9 | 17 | 20 | 16 | 18 | - |

5 | 11 | 21 | 24 | 20 | 23 | - |

Thus the expression `4n+1`

will match the first, fifth,
ninth, thirteenth, seventeenth, twenty-first, and so on, elements if they
exist, while the expression `-n+3`

will match the third,
second, and first elements only.

The difference, then, between the `nth-`

and
`nth-last-`

pseudo-classes is that `nth-`

pseudo-classes count from the top of the document tree down—they select
elements that have N`-1`

siblings
*before* them; meanwhile, the `nth-last-`

pseudo-classes count from the bottom up—they select elements that have
N`-1`

siblings *after*
them.

## User-contributed notes

- ID:
- #3
- Date:
- Thu, 10 Jun 2010 05:47:00 GMT

["mention that these only work in opera 9.5 and konqueror at the top of the reference"]

The browser support chart is shown on the :nth-child page

http://reference.sitepoint.com/css/pseudoclass-nthchild

- ID:
- #1
- Date:
- Thu, 23 Apr 2009 22:33:55 GMT

It would have been nice to mention that these only work in opera 9.5 and konqueror at the top of the reference