I’ve been doing some client side development at the jobbity job. I had to re-discover the zen art of making shit work in Internet Explorer.

I pulled an old trick out of my hat that I thought would be worth sharing.

Internet Exploer 7, and 8 do not support the nth-child pseudo element selector, but they do support the adjacent sibling selector. This means you can fake a basic nth-child selector for IE with the following:

/* standard nth */
ul.menu li:nth-child(3)
{
    /* styles for the 3rd LI */
}

/* IE nth */
ul.menu>li + li + li 
{
    /* styles for the 3rd LI */
}

/* alternate, more specific IE nth */
ul.menu>li:first-child + li + li 
{
    /* styles for the 3rd LI */
}

Complex or formulaic nth-child selectors, or selectors with keywords are not possible with this method – but it does mean you can style, say, all the known list items in a static menu without resorting to lots of IDs or class names.

And no, of course this doesn’t work in IE 6 If you’re targeting IE 6 in this day and age you need to rethink your web strategy.