What is the best way to give support `nth-child` in one shot to all IE version?

Question

What is the best way to give support nth-child in one shot to all IE version?

I want to give style like this. for some particular pages.

#products tr:nth-child(even) {
  background-color: red;
}


#products tr:nth-child(odd) {
  background-color: white;
}

Answer 1

That project gives you "native" support for these and many others CSS3 selectors for at least IE7/8.

But here you'll have a problem with IE7 which doesn't support background-color for tr.

Answer 2

You can do it in javascript.

var table = document.getElementById('products');

var rows = table.getElementByTagsName('tr');

for (var i = 0; i < rows.length; ++i)
{
   if ( (i % 2) == 0 )
   {
       rows[i].className = 'even';
   }
}

then do your CSS like this:

#products tr td
{
    background-color: white;
}

#products tr.even td
{
    background-color: red;
}

If you have used a javascript library, you could have done this :

$('#products tr:even').addClass('even');

Answer 3

You can do this in jQuery too, and they'll likely have solved your cross browser issue.

$('#products').children('tr:even').css('background-color', 'red');
$('#products').children('tr:odd').css('background-color', 'white');