:first-child fails when an element of a different class is dynamically inserted above
Posted
by koko
on Stack Overflow
See other posts from Stack Overflow
or by koko
Published on 2010-06-18T08:03:23Z
Indexed on
2010/06/18
8:23 UTC
Read the original article
Hit count: 285
So, I've encountered a situation where inserting an element of a different class/id breaks all css-rules on that :first-child.
<div id="nav">
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
<div class="nSub">abcdef</div>
</div>
.nSub:first-child { margin-top:15px; -moz-border-radius-topleft:5px; /* ... */ }
.nSub { background:#666; /* ... */ }
.nSub:last-child { -moz-border-radius-bottomleft:5px; /* ... */ }
As soon as I insert an element of another class/id above, like this:
$('nav').insert({top:'<div id="newWF"></div>'});
all declarations for .nSub:first-child are being ignored in both FF 3.6 and Safari 4.
© Stack Overflow or respective owner
