Because IE7 (released 2006) and IE8 (released 2009) do not understand nth-child
(added to CSS 2010) they seem to be treating the second selector in the second rule as an error. It's response is to ignore the whole rule including the other selectors which it considers valid. Despite nth-child being appended to a different selector. It is a strange decision by the developers to ignore the whole rule, rather than just the selector that it considers invalid.
Re-writing the CSS as follows will separate selectors added after IE7/IE8 from the ones that existed before and thus solve the problem:
tr.odd{
background-color: red;
}
tr.odd{
background-color: blue;
}
/* IE7 and IE8 will ignore this entire rule */
div:nth-child(odd){
background-color: blue;
}
Note: Please do not be a smart-arse and suggest removing the first rule. Obviously in such a boiled-down example it is surplus but this is a drastically truncated version of a huge project in which CSS concatenated to the end of the document was required to override previous rules.