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:

• :nth-child(N)
• :nth-last-child(N)
• :nth-of-type(N)
• :nth-last-of-type(N)

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 Result Sets for Pseudo-class Expressions 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.

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.