Menu
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?
594
If that class has a background-color of blue, and you want your <div> to have a red background instead, try to change the color from blue to red in the class itself. You could also create a new CSS class that defined a background-color property with a value of red and let your <div> reference that class.
Yes. Since the initial value is transparent , that is what you use if you want to turn background coloring "off". none of these will reset to a previous value (ie if set by another css rule :( This reminds me of trying to use font-color when I first got going with coding.
Check the style inspector to make sure background-color is not being overridden. You might want to include your stylesheet after bootstrap. Don't load your external script files within divs. That's not necessary, It should either go before the closing body tag or in the head section.
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.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
