nth-child selectors (pseudo classes) in IE 8

Question

I need the expression

`tr:nth-child(2n){background-color: #ddd;}` 

to color each second row for a table which I create dynamically. But this expression works only for IE9. So is it possible to enable these CSS3 pseudo classes for IE8, too?

Answer 1

For IE8 not as far as I know it. However there is a solution with jQuery using .filter(":even"). see this documentation about it. It will work with IE7 or newer.

Answer 2

You can get nth child selectors in IE with a JavaScript shim such as selectivizr . This article is also interesting for faking the functionality http://abouthalf.com/2011/07/06/poor-mans-nth-child-selector-for-ie-7-and-8/ .

Answer 3

I have done it by Prototype JS. Works also in IE8.

var rowCounter = 0;
$$('tr').each(function (row) { /*$$('tr') == array of tr tags*/
    if (rowCounter % 2 === 0) { /*modulo dividing find even element*/
        row.addClassName('even');
    }
    rowCounter += 1;
});

Visit: http://jsfiddle.net/P9SHy/3/