CODEWITHSUNDEEP
jquerycss
Mark Robbins
Mark Robbins

Reputation: 2457

hide inner div when outer class css display is table important

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/

Upvotes: 1

Views: 877

Answers (2)

user1726343
user1726343

Reputation:

!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/

Upvotes: 2

Calvin
Calvin

Reputation: 1295

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.

Upvotes: 2

Related Questions