nth-child() or first-child? how to select first AND second child in one
Your best bet for cross-browser compatibility would be to use jQuery and assign a class to the list item.
- http://api.jquery.com/eq-selector/
- http://api.jquery.com/index/
Something like...
$( function() {
$('li').each( function() {
if( $(this).index() == 1 || $(this).index() == 2 ) {
$(this).addClass('first_or_second');
}
});
});
This works in IE9+ but it's not the shortest. @BoltClock's selector is the shortest solution for IE9+. I think this one is marginally easier to understand so I'll leave it as an alternative.
ul li:first-child a, ul li:nth-child(2) a
{
background: none repeat scroll 0 0 biege;
}
Without the use of js or :nth-child
(which I believe is not supported in IE)
ul li:first-child, ul li:first-child + li {
list-style: none;
}
Here is a demo tested in IE7
For selecting the first and second children, you can use a single :nth-child()
pseudo-class like so:
ul li:nth-child(-n+2) a {
background: none repeat scroll 0 0 beige;
}