Firefox 3.5 supports several new CSS3 selectors. In this post we’ll talk about four of them: :nth-child, :nth-last-child, :nth-of-type and :nth-last-of-type.
Each of these is called a Pseudo-class and can be used to apply styles to existing selectors. The best way to describe how this works is with some examples.
This pseudo-class lets you apply styles to groups of elements. The most common use case is to highlight odd or even items in a table:
tr:nth-child(even) { background-color: #E8E8E8; }
A live example (works in Firefox 3.5):
| Row 1 |
| Row 2 |
| Row 3 |
| Row 4 |
But you can also use it to apply styles to groups of more than two using a special notation. The documentation for this rule is pretty obtuse but basically the “3″ in the example splits the number of elements into groups of three and the “+1″ is the offset in that group. There are more examples in the spec as well.
tr:nth-child(3n+1) { background-color: red; } tr:nth-child(3n+2) { background-color: green; } tr:nth-child(3n+3) { background-color: blue; }
A live example (works in Firefox 3.5):
| Row 1 |
| Row 2 |
| Row 3 |
| Row 4 |
| Row 5 |
| Row 6 |
The :nth-last-child pseudo-class works exactly like the :nth-child pseudo-class except that it counts elements in the opposite direction:
tr:nth-last-child(3n+3) { background-color: red; } tr:nth-last-child(3n+2) { background-color: green; } tr:nth-last-child(3n+1) { background-color: blue; }
Example (works in Firefox 3.5):
| Row 1 |
| Row 2 |
| Row 3 |
| Row 4 |
| Row 5 |
| Row 6 |
The :nth-of-type pseudo-class uses the same kind of syntax as the other elements here but allows you to select based on element type.
div:nth-of-type(odd) { border-color: red } div:nth-of-type(even) { border-color: blue }
Example (works in Firefox 3.5):
Much like :nth-last-child, :nth-last-of-type is the same as :nth-of-type except that it counts in the opposite direction.
These four properties allow you to do interesting things with style and element groups and we hope that they make it easier to style your pages.
Great stuff! Now the usual five year wait for Internet Explorer to support it…
Not quite, jQuery is up to speed supporting that functionality for you so it should not introduce much overhead as more and more native selectors are included.
I cant see the changes in the old FireFox, but this is such a good news. have been waiting endlessly for CSS3 support.
For those who do not know, the cn+d used for selection is the standard notation for arithmetic sequences. d is the offset, c the common difference, and n the variable.
This is indeed good news. hopefully in the next few years I’ll be able to start using it. I hate IE so much
I don’t like the thought of using jQuery for styling so I’d rather wait for unilateral browser support before moving over to it fully.