IE8 :nth-child and :before

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in IE7/8.

See: http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.

IE9.js solves this and other related problems!

:nth-child(odd) and :nth-child(even) work with this.

Usage:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Try pairing Selectivizr with NMWatcher. That's what I do on all my sites to get good pseudo selector support across all browsers. FWIW if you're using a lot of HTML5 elements then it might be worth using v 1.2.3 of NMWatcher rather than 1.2.4, I had a selectivizr issue with a site today which I couldn't seem to fix, then I moved to 1.2.3 and it worked fine.

IE8 :nth-child and :before

Related

Recent Posts