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

css background-color
ralbatross picture ralbatross · Sep 16, 2013 · Viewed 58.6k times · Source

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

<style>
    td { background-color: red }
    td.transparent { background-color: none }
</style>

<table>
    <tr>
        <td>foo</td>
        <td class="transparent">bar</td>
    </tr>
</table>

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.

Thoughts?

Answer

Explosion Pills picture Explosion Pills · Sep 16, 2013

The value needs to be a valid color, and none is not a valid color. Instead you can use transparent (similar to rgba(0,0,0,0) but more widely supported). If that's no good you can always go with white or use a more specific rule for the red background instead.

Related questions

How to make div background color transparent in CSS

I'm not using CSS3. So I can't use opacity or filter attributes. Without using these attributes how can I make the background-color transparent of a div? It should be kind of the text box example in this link. Here the …

Read More
Change select box option background color

I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options. See Fiddle HTML: <select> <option val="">Please choose&…

Read More
Is background-color:none valid CSS?

Can anyone tell me if the following CSS is valid? .class { background-color:none; }

Read More