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.


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:

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

I should be red!
I should be blue!


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.


  1. Ed Avis

    Great stuff! Now the usual five year wait for Internet Explorer to support it…

    June 25th, 2009 at 08:36

  2. Smooth Criminal

    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.

    June 25th, 2009 at 21:40

  3. […] 原文地址:new CSS3 properties in Firefox 3.5 – nth-* 系列地址:颠覆网络35天 […]

    June 25th, 2009 at 22:46

  4. Rizwan

    I cant see the changes in the old FireFox, but this is such a good news. have been waiting endlessly for CSS3 support.

    June 26th, 2009 at 03:46

  5. Havvy

    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.

    June 26th, 2009 at 10:09

  6. Simon Day

    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.

    June 30th, 2009 at 02:34

  7. […] Auch werden neue Pseudoklassen unterstützt, die es dem Gestalter einer Website zum Beispiel möglich machen, die Hintergrundfarben von Tabellenzellen automatisch bestimmen zu lassen. Also […]

    June 30th, 2009 at 11:25

  8. […] pseudo-classes: only-of-type, first-of-type and last-of-type. These are all very similar to the *-nth classes we covered in an earlier […]

    June 30th, 2009 at 20:26

  9. […] 原文地址:new CSS3 properties in Firefox 3.5 – nth-* 系列地址:颠覆网络35天 […]

    August 11th, 2009 at 21:58

Comments are closed for this article.