CSS background-color is picky

Question

CSS background-color is giving me problems. The style block needs to use ".land.custom_one" instead of plain ".custom_one" to work. Removing "land" from td-class also makes it work, but I need the "land"-class for hover to work as its not all tds which needs the hover effect. Style block is being defined after style.css. I have this issue in both Chrome and Firefox.

style.css
#id table {
  background-color: blue;
}
#id td.land {
  background-color: green;
}
#id td.land:hover {
  background-color: black;
  color: orange;
}

style block
.custom_one {
  background-color: red;
  color: white;
}

html
<td class="land custom_one"></td>

Answer 1

A selector's specificity is calculated as follows:

• count the number of ID attributes in the selector (= a)
• count the number of other attributes and pseudo-classes in the selector (= b)
• count the number of element names in the selector (= c)
• ignore pseudo-elements.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Element Selector : 0, 0, 1 (1)

Class Selector 0, 1, 0 (10)

ID Selector 1, 0, 0 (100)

CSS:

 .blue {
 font-color:blue;
 }

 #red {
 font-color:red;
 }

HTML:

 <div class="blue">
    <div class="blue">
        <div class="blue">
            <div id="red">this text will be red</div>
        </div>
     </div>
  </div>

The best way to explain it is what this guy has done: CSS: Specificity Wars

Answer 2

When all else fails, use !important.

.custom_one {
  background-color: red !important;
  color: white !important;
}