IE8 and jQuery selectors

Question

Today it came to my attention that a combination of jQuery selectors and the addClass() function does not work properly on IE8.

For example, when I want to ensure th

Answer 1

The selector works correctly on the jQuery side...but IE8 discards the style rule entirely (in compliance with the specification) because it doesn't recognize nth-child:

tr:nth-child(odd) td, tr.odd td {
  background-color: #86B486;
}

If you split it, it'll work correctly:

tr:nth-child(odd) td {
  background-color: #86B486;
}
tr.odd td {
  background-color: #86B486;
}

Here's the original version (a single rule IE8 removes) and here's a fixed sample, with the rule split.

---

For completeness sake, reversing the rule like this doesn't help:

tr.odd td, tr:nth-child(odd) td {
  background-color: #86B486;
}

Answer 2

this works for me in ie8 and ie9 first you need 2 classes with the background-color

.even { background-color: white; } 
.odd { background-color: #ff0; }

then with jquery find tr:odd add tr:even and add the corresponding class

$(document).ready(function () {
        $('#table1').find('tr:odd').addClass("odd"); 
        $('#table1').find('tr:even').addClass("even"); 
});