Geek Answers Handbook

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

I see something rather strange in Chrome 10 w / :first-child:before.

Using 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 someone explain why it <li>Four</li>displays an asterisk in Chrome 10.0.648.204 in Win XP SP3? See http://jsfiddle.net/MxtHm/

But if I changed CSS to

ul {
    list-style-type: none
}

li:before {
    content: "* "
}

li:first-child {
    background: none
}

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

<li>Four</li>displayed without an asterisk. See http://jsfiddle.net/SGRej/

Safari 5.0.4 and Firefox 3.6.16 make both examples the same. I looked through both Meyer's book and the CSS specification looking for explanation with no luck, and the CSS validator doesn't complain about CSS.

It is extremely strange that if I test an item in Chrome, it shows that it li:first-child:beforeoverrides the rule li:before.

JSFiddle XHTML 1.0 Strict DOCTYPE, HTML5 DOCTYPE.

.

2011-04-28 EDIT: , Chrome 11.0.696.57 , .

+5
1

, , , :

last-child: Chrome? ?

, , , .

- ; . .

+9

More articles:


All Articles