views:

2335

answers:

3

According to css3.info's selector test, Firefox 3.0 supports some permutations of the nth-child selector. However, the code shown here (#30) doesn't work for me.

It should select the empty paragraphs, so I edited my code to the following but it doesn't show in Firefox (it works in Opera).

<style type="text/css">
div :nth-child(even) {
 background-color: yellow;
 height: 30px;
}
</style>

<div>
 <div>Does this element match?</div>
 <div></div>
 <div>Does this element match?</div>
 <div></div>
</div>

Is this a bug in the test, or have I made an error somewhere?

+2  A: 

Hmm... according to this page Firefox 3.0 does not support :nth-child.

Andrew Hare
Verified - Safari 3 your code works. FF 3 it doesn't. There's also a difference between div:nth-child(even) and div :nth-child(even)
Mike Robinson
I just tested 3.0.8 and this was the result for :nth-child()(47 out of 88 failed).Including :nth-child(even)
s_hewitt
However, it did pass div :nth-child(2n+0) {} which also selects evens.
s_hewitt
After some testing on my own, I think their tests are not working. I saw a lot of duplicate tests, with 1 pass and 1 fail.
s_hewitt
I'm aware that Firefox doesn't officially support nth-child, which is why I was suprised that apparently some of those tests passed. I guess the test is broken in some way, since FF doesn't appear to support nth-child in any form.
DisgruntledGoat
A: 

if you use jquery this might help you (jquery don't care what browser your user is using:) )

Yassir
+1  A: 

In Firefox 3.5, your test case now works as expected.

Allen Pike
yeah, I was about to say... I use nth-child all the time with firefox and it works. I'm using 3.5 though.
nbv4
Well this question was asked 3 months before Firefox 3.5 was released... anyway the question was more about why apparently half the nth-child tests passed and half didn't.
DisgruntledGoat