Is it possible to get the nth-child pseudo-selector to work with a specific class?

See this example: http://jsfiddle.net/fZGvH/

I want to have the second DIV.red turn red, but it doesn't apply the color as expected.

Not only that, but when you specify this, it changes the 5th DIV to red:

div.red:nth-child(6)

When you specify this, it changes the 8th DIV to red:

div.red:nth-child(9)

It seems to be one DIV behind. There are only 8 DIV tags in the example so I don't know why nth-child(9) even works. Testing using Firefox 3.6, but in my actual production code the same problem occurs in Chrome. I'm not understanding something about how this is supposed to work, would appreciate clarification.

Also, this will change the 6th DIV to red, but what I actually want is for it to change the second DIV.red to red:

div.red:nth-of-type(6)

And I don't understand why nth-child() and nth-of-type() respond differently, since there are only eight tags of the same type in the document.