CSS3 On IE8 Odd even row by different color

Question

I Am Having Css code for differentiating odd and even row by different color

.historyLog tr:nth-child(odd) td {
background-color:blue;
}
.historyLog tr.odd td{
    background-color: blue;
}
​
.historyLog tr:nth-child(even) td {
background-color:orange;
}
.historyLog tr.even td{
    background-color: orange;
}

And having table with class .historyLog

<table class="historyLog">
<tr><td></td></tr>
<tr><td></td></tr>
</table>

Problem with me is that when I apply Css using the class attribute .historyLog i.ie

.historyLog tr:nth-child(odd) td {
background-color:blue;
}

The IE8 does't execute it and what I will get is same color for all rows whether even or odd. But if I apply css without using the class attribute of table i.e

tr:nth-child(odd) td {
background-color:blue;
}

then IE8 execute it in odd even row with different color. Please help me by giving the answer that how IE8 will show odd and even row by different color using the class attribute of table.

Answer 1

You can't, since IE8 doesn't support CSS3.

You could do this with jQuery:

$('tr').each(function(){
    if ($(this).index()%2<1)
        $(this).addClass('even');
});

​

Answer 2

Since IE8 doesnot support CSS3 selectors. You could very well use jQuery's in built in :odd or :even selectors to achieve the same functionality.

$(".historyLog tr:odd").css('background-color','blue');
$(".historyLog tr:even").css('background-color','white');

or you could use css class file instead

$(".historyLog tr:odd").addClass("odd");
$(".historyLog tr:even").addClass("even");