Alternative for nth-child for older IE browsers

Question

Is there an alternative for targeting elements using nth-child() for older IE browsers?

Javascript (non-jquery) would suffice as well.

EDIT: Given additional libraries cannot be added to the page.

Solution 1

You can use jQuery's :nth-child() selector;

$("li:nth-child(even)") // target even li's
$("li:nth-child(odd)") // target odd li's
$("li:nth-child(5n)") // target the fifth li

Solution 2

it sucks a little, but you can

ul > li {} /* first-child, overwritten by below */
ul > li + li {} /* second-child, overwritten by below, etc */
ul > li + li + li {}
ul > li + li + li + li {}

Repeat as necessary.

Solution 3

There is Selectivizr: http://selectivizr.com/

:nth-child is supported in every javascript framework that works with it, including jQuery.

The big advantage with using this is that it reads directly from your CSS files rather than having to write additional javascript (it's unobtrusive). You can simply use the advanced selectors as normal.

Solution 4

You can use the IE9.js polyfill: http://ie7-js.googlecode.com/svn/test/index.html.

View more solutions

Comments

[Anthony Miller]

In case of an absence of jquery, is there a plain javascript solution?

[Wesley Murch]

IEX.js is pretty powerful, but it's a beast. I've actually had more problems come from using it.

[Anthony Miller]

This sounds pretty cool. I'll keep this as a reference for my own sites.

[Wesley Murch]

I always just end up using CSS2 :( I have to support IE7, and none of the solutions I know of that are out there can cope well with new elements that are added to the DOM (think AJAX), after the js patch loads and parses the CSS. Even the jquery solution in the other answer can't deal with this unless you use the livequery plugin or something similar to call those functions again when the page is updated. If you aren't adding new elements to the page, it's not an issue, but it's a huge deal-breaker for me.

[Andres Ilich]

there are no :nth-child implementation in plain javascript, what you can do is in case there is no jQuery support is get creative with css, such as this case or [this](pbdh.com/open-house/entry/poor-mans-nth-type] other. Modern solutions for older browsers are hard to come by and rely on hacks to work and every case is different so one true solution you're probably not going to find.

[Anthony Miller]

poor man's nth-child will have to suffice for now. Thanks for the link =D

[caitriona]

this one worked nicely for me - i was using 1st, 2nd & 3rd child, so it wasn't too awful.

[Dil A]

IEX.js stopped Respond.js from working. So watch out if your building a responsive site that need to support IE8 and below.

[NoobsArePeople2]

Love this answer since it only requires CSS that IE natively understands.