Why does background-color:none not override a specified background color?

My goal is for all cells in a table to have a background color except ones with the class ‘transparent’. Here is some sample code ( corresponding jsfiddle):

td { background-color: red }
td.transparent { background-color: none }
    <td class="transparent">bar</td>

Why doesn’t the td.transparent cell follow the td.transparent css rule? When I inspect the element the rule is there, but it is getting overridden by the td rule, which seems to break normal css specificity rules.

I can get what I want by using rgba(0,0,0,0) instead of none, but rgba is not supported in IE8 and I would like to avoid using an ugly hack if I could.

I’d also like to simply understand why this isn’t working the way I expected.


None isn’t a valid color, instead use transparent.

jsFiddle demo

td.transparent {
  background-color: transparent;

Alternatively, you could also use the following:

The reason this works is because it is stating there should be no background in general. It is not referring to a specific color as in the first example.

td.transparent {
  background: none;

jsFiddle using this method.

As a side note, usage of CSS3 colors (rgba) is not 100% supported. Reference here: http://caniuse.com/css3-colors

In addition, I would like to say that all of this could be avoided if you didn’t set an inital background-color in the first place. There would then be no reason to overwrite the original style if this were the case.