Display none ! important need to override by using jQuery

Question

Anyone who is knowing how to override the below mentioned css by using jQuery ?

 .actionButton.single-pet
        {
            display: none !important;
        }

It won't work for this : $('.actionButton.single-pet').show();

Does `.actionButton.single-pet` class has more css properties rather than `display: none !important;` ? — Mr_Green, Sep 13 '13 at 11:08
@Mr_Green Nope,That is the only property.But 'actionButton' class has lot of properties.That's why I have introduced 'single-pet' class and override the display behavior of 'actionButton'. — Sampath, Sep 13 '13 at 11:20

score 86 · Accepted Answer · edited May 23 '17 at 11:54

86

$('.actionButton.single-pet').attr("style", "display: inline !important");

Sets CSS to display: inline !important;. display: inline is the default property for display. You need !important again to override the previous !important.

Note that !important shouldn't be used often. Read the accepted answer at How to override !important? for more details.

UPDATE: We can't use .css() here as it does not support !important. http://bugs.jquery.com/ticket/11173 for more details; appears to be a bug.

edited May 23 '17 at 11:54

Community

1
1

answered Sep 13 '13 at 10:57

wei2912

6,141
2
19
20

Noted, using another method. Also, I would like to know why my answer is downvoted. Thanks. – wei2912 Sep 13 '13 at 10:59
maybe because your post is not an answer to OP's question. – Mr_Green Sep 13 '13 at 11:04
@Mr_Green hmm, I don't see why it isn't an answer to the OP's question. – wei2912 Sep 13 '13 at 11:05
yeah sorry I overlooked – Mr_Green Sep 13 '13 at 11:11
@MathijsFlietstra there were some errors in your fiddle. I updated it. [fiddle](http://jsfiddle.net/bbSNM/2/). :) – Mr_Green Sep 13 '13 at 11:16
Yes I realised just then, but the answer does work :) thanks. – Mathijs Flietstra Sep 13 '13 at 11:17

A. Wolff · Answer 2 · 2013-09-13T11:08:30.980

4

$('.actionButton.single-pet').removeClass('single-pet');

Or just:

$('.actionButton.single-pet').addClass('single-pet-shown');

With CSS:

.actionButton.single-pet-shown {
    display: block !important;
}

edited Sep 13 '13 at 11:08

answered Sep 13 '13 at 10:56

A. Wolff

74,033
9
94
155

1

Without the rest of his CSS and markup, this is a pure guess, not an educated answer. – DevlshOne Sep 13 '13 at 11:01
1

The OP might not want `.single-pet` to be removed. – wei2912 Sep 13 '13 at 11:03
@Mr_Green No, it does not. It does not **override** the css property, it simply removes it. Please read the OP question again. – DevlshOne Sep 13 '13 at 11:04
@wei2912 ya, but he still could apply all other CSS rules relative to .single-pet class and use a new class .single-pet-shown without display:none !important rule. – A. Wolff Sep 13 '13 at 11:05
3

What if `.single-pet` also has some other properties elsewhere in the stylesheet and they are crucial to the document's layout? – DevlshOne Sep 13 '13 at 11:05
@DevlshOne is that hard to toggle between classes? BTW, he could just add a new class which would override the display rule of previous class – A. Wolff Sep 13 '13 at 11:06
@A.Wolff the point here is to override "display: none !important;" such that `.single-pet` is shown. Nothing else should be modified. – wei2912 Sep 13 '13 at 11:08
@wei2912 so you cannot. Is this the answer OP is looking for? – A. Wolff Sep 13 '13 at 11:09
1

@DevlshOne what if it doesn't? let just leave this to OP to decide. or if someone have better alternative then they will post it as answer. – Mr_Green Sep 13 '13 at 11:10
@A.Wolff you can override `!important` by creating another rule with `!important`, but is further on in the CSS stylesheet. According to standard CSS rules, that should override. – wei2912 Sep 13 '13 at 11:10
@wei2912 I write that because you said: 'Nothing else should be modified.' so now i'm confused... – A. Wolff Sep 13 '13 at 11:12
@A.Wolff ah, sorry for the confusion. – wei2912 Sep 13 '13 at 11:16

Display none ! important need to override by using jQuery

2 Answers2