hide inner div when outer class css display is table important

Question

Given an outer div whose css class contains display:table !important , its inner div still shows when you .hide() the outer div with jQuery, or set the outer divs inline style to display:none;

Is this what they mean by 'cascading' style sheets? ;)

I am really surprised I have not run into this before. Can someone explain the mechanism of this conflict and what I should do given I do not want to mess with display:table !important in the css class.

Right now I am looking at this with Mozilla.

http://jsfiddle.net/YrEEk/1/

Answer 1

!important rules override other style rules, (even inline ones), which is why you should use specificity to determine precedence in your stylesheets instead of throwing in an !important .

The only way to override that !important rule now is to use another !important rule, one that occurs lower in the cascade or is more specific.

.hidden{
    display:none !important;
}

Now you can apply this class to the element:

$('#d1').addClass('hidden');

Here is a demonstration: http://jsfiddle.net/YrEEk/4/

Answer 2

That's because when you use !important, setting anything else after it without !important will not work as it is still overridden by the initial "display:table !important"

$('#d1').hide();

This line simply adds a css property "display:none" to the element which does not work dcause you still have "display:table !important"

If you want, just set CSS as "display:table" without the !important.