Use nth-child in IE8 (Partially)

IE8 doesn't support :nth-child css selector by default. So to make it work one of the obvious approach is to use separate classes or to use some of the available Javascript fallback like Selectivizr.

But I like the idea of abusing the css adjacent (+) selector as described below...

/* For li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}

/* For 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;
}‚Äč

This can be useful when we have limited list size. To use complex nth-child selector (2n + 1, odd, even etc..), we need to still use Javascript solution.

Happy Coding! :)

This entry was published on 23rd Aug, 2013.