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
5, the fifth element will be selected.
The argument N can also be given as
a and b are integers
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
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
If a and b are
equal, or if b is zero,
b can be omitted. For example, the expressions
3n+0 are equivalent to
3n—they refer to every third element. The keyword value
even is equivalent to the expression
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.
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-last- pseudo-classes is that
pseudo-classes count from the top of the document tree down—they select
elements that have N
before them; meanwhile, the
pseudo-classes count from the bottom up—they select elements that have
-1 siblings after
- 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
- 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