new CSS3 properties in Firefox 3.5 – nth-*

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.

:nth-child

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):

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):

:nth-last-child

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):

:nth-of-type

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):

:nth-last-of-type

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.