Style does not overdo it

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 erases 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 selects the bold from YellowThreshold but does not raise the background yellow. Ive tried this with Color and Background-Color , but no change. Theres some priority issues Im not going through. Any suggestions?

Answer 1

background-color is applied to the table row, but the explicit target td in the table tr td selector takes precedence.

Edit:

 tr.RedThreshold { background-color: red; } tr.YellowThreshold { background-color: yellow !important; font-weight:bold; } 

To:

 tr.RedThreshold td { background-color: red; } tr.YellowThreshold td { background-color: yellow !important; font-weight:bold; } 

---

@adrift correctly references the CSS 2.1 specification and the stacking context as the main reason for the OP question.

Answer 2

This is actually not a specificity problem - instead, it is related to the color order of the background colors.

Adapted from Appendix E (Detailed Description of Stack Contexts), CSS 2.1 Spec :

Otherwise, if the element is <table> :

• background tables (color, then image).
• The background of the group columns (color, then image).
• column background (color then image).
• groups of lines (color then image).
• line frames (color image).
• honeycomb backgrounds (color then image).
• all table borders (in tree order for divided borders).

Background

<td> simply drawn over the background <tr> - if you do not create a stacking context and do not change the position of elements with z-index - http://jsfiddle.net/VBGMP/