Odd Behavior with CSS :first-child:before in Chrome
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.
mpdonadio
Drupal developer. Former DSP / firmware engineer. Functional programming enthusiast. Moderator at Drupal Answers.
Updated on June 17, 2022Comments
-
mpdonadio about 2 years
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 theli: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 about 13 yearsThanks. 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.