Style not getting overriden

Question

This is a section of my CSS stylesheet:

table tr td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    overflow: wrap;
    background-color: #CCFFFF;
    text-align: center;
}
table {
    width: 75%;
}
tr {
    maximum-width: 200px;
}
tr.RedThreshold {
    background-color: red;
}
tr.YellowThreshold {
    background-color: yellow !important;
    font-weight: bold;
}

It styles this YellowThreshold element in my HTML:

<tr class="YellowThreshold">
    <td>vrd70</td>
    <td>29</td>
    <td>0x127c</td>
    <td>4.86</td>
    <td>4.54</td>
    <td>6.06</td>
</tr>

The end result picks up the bold from the YellowThreshold, but it’s not picking up the yellow background color. I’ve tried it with just Color and with Background-Color, but no change. There’s some priority issue I’m not getting past. Any suggestions?

Answer 1

Its actually not a specificity issue - it instead has to do with the painting order of background colours.

Taken from Appendix E (Elaborate description of Stacking Contexts), CSS 2.1 Spec:

Otherwise, if the element is a <table>:

1. table backgrounds (color then image).
2. column group backgrounds (color then image).
3. column backgrounds (color then image).
4. row group backgrounds (color then image).
5. row backgrounds (color then image).
6. cell backgrounds (color then image).
7. all table borders (in tree order for separated borders).

<td> backgrounds are simply painted over <tr> backgrounds - unless you create a stacking context and change either elements position with z-index - http://jsfiddle.net/VBGMP/