5

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.

mpdonadio
  • 2,891
  • 3
  • 35
  • 54
  • Chromium 12.0.712.0 (79102) on Ubuntu 10.10 does not display this erroneous behavior so a fix for this bug might have been commited, so I guess it will soon surface in the stable builds. – Cristian Necula Apr 04 '11 at 13:47
  • Chrome 10.0.648.204, IE9, and FF4 on Windows 7 all render the same for me, with no '*' on the first LIs. – Mr. Shiny and New 安宇 Apr 04 '11 at 13:50
  • I use Chrome 10.0.648.204, and i cannot see the problem. Maybe a Win XP error? I can tell you that there is no problem with your CSS and HTML, it is Chrome. – Jan Sverre Apr 04 '11 at 14:01

1 Answers1

9

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thanks. I didn't see the references to these, but I don't think I actually searched for "last-child". The workaround mentioned didn't fix things for me, but mine doesn't have any side-effects. – mpdonadio Apr 04 '11 at 22:38