Making nth-child work in IE8 and lower

Question

I'm making use of the following code:

.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }

which is working great but I need to mimic this for browsers that do not support nth-child, like IE8.

I have tried this jQuery code to add a class but nothing happens, is this code right?

// Support nth child in IE8
$('.c-1:first-child').addClass('remove');
$('.c-2:first-child').addClass('remove');
$('.c-1:nth-child(4n+1)').addClass('remove');

Answer 1

I suggest use http://selectivizr.com/

For pseudo-elements IE8. I know its old post but maybe some1 will find it usefull :)

Answer 2

There is a library that will polyfill the missing CSS features in IE:

http://code.google.com/p/ie7-js/

Using the IE9 version will give you access to :nth-child() according to the feature list: http://ie7-js.googlecode.com/svn/test/index.html

Answer 3

Maybe check out the following article:

http://abouthalf.com/2011/07/06/poor-mans-nth-child-selector-for-ie-7-and-8/

But the described solution works only in ie7 and 8, in ie6 it won't unfortunately

Answer 4

You can use jQuery's .eq(<index>) for this.

For example:

$('.c-1').eq(0).addClass('remove');