Tuesday, March 1, 2011

Firefox's CSS3 "nth-child" support?

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?

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

    Mike Robinson : 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)
    s_hewitt : 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.
    DisgruntledGoat : 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.
  • if you use jquery this might help you (jquery don't care what browser your user is using:) )

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

    nbv4 : yeah, I was about to say... I use nth-child all the time with firefox and it works. I'm using 3.5 though.
    DisgruntledGoat : 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.

0 comments:

Post a Comment