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):
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
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.
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.