Internet Explorer IE7 + IE8 ignoring CSS rule with

Question

I just spent an hour debugging a strange CSS bug that was occuring in IE7 and IE8 and wanted to share my findings:

Question: Why is IE7/IE8 not picking up the later rule and overwriting the previous one?

Example markup looks as follows:

<table>
    <caption>Things on planet Earth</caption>
    <tbody>
        <tr class="odd"><td>Monkeys</td></tr>
        <tr><td>Tennis</td></tr>
        <tr class="odd"><td>Fridge Magnets</td></tr>
        <tr><td>Humous</td></tr>
    </tbody>
</table>

Boiled-down example CSS looks like this:

tr.odd{
    background-color: red;
}

tr.odd, div:nth-child(odd){
    background-color: blue;
}

Chrome, FF and IE9+ render table rows with the class 'odd' in blue as expected, because the rule setting it to blue occurs later in the document and has equal specificity. But IE7 and IE8 render them in red! So why is IE not applying the second rule?

Answer 1

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.