CSS background-color is picky

Programmer 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

Find the answer here