Odd Behavior with CSS :first-child:before in Chrome

Question

I am seeing something rather odd in Chrome 10 w/ :first-child:before.

With this HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Siz</li>
</ul>

and this CSS

ul {
    list-style-type: none
}

li:before {
    content: "* "
}

li:first-child:before {
    content: ""
}

Can anyone explai why <li>Four</li> renders with an asterisk in Chrome 10.0.648.204 in Win XP SP3? See http://jsfiddle.net/MxtHm/

But if I change the CSS to

ul {
    list-style-type: none
}

li:before {
    content: "* "
}

li:first-child {
    background: none
}

li:first-child:before {
    content: ""
}

<li>Four</li> renders without the asterisk. See http://jsfiddle.net/SGRej/

Safari 5.0.4 and Firefox 3.6.16 render both examples the same. I have gone through both Meyer's book and the CSS spec looking for an explanation without any luck, and the CSS validator isn't complaining about the CSS.

The extremely odd thing is that if I Inspect Element in Chrome, it shows that the li:first-child:before is overriding the li:before rule.

JSFiddle is using a XHTML 1.0 Strict DOCTYPE, but I am also seeing this with the HTML5 DOCTYPE.

Thanks.

2011-04-28 EDIT: This appears to have been fixed in Chrome 11.0.696.57, along with other similar pseudo-element related problems.

Answer 1

I'm reasonably sure you're getting bitten by the same issue as in this previous question I answered:

last-child:after not rendering in Chrome? Pseudo-element use issue?

I figured out the obvious truth in that it was a bug, and found some bug reports confirming it.

Somebody else found an odd workaround; see the accepted answer.