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();
2 Answers
$('.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.
-
Noted, using another method. Also, I would like to know why my answer is downvoted. Thanks.– wei2912Commented Sep 13, 2013 at 10:59
-
maybe because your post is not an answer to OP's question.– Mr_GreenCommented Sep 13, 2013 at 11:04
-
@Mr_Green hmm, I don't see why it isn't an answer to the OP's question.– wei2912Commented Sep 13, 2013 at 11:05
-
-
$('.actionButton.single-pet').removeClass('single-pet');
Or just:
$('.actionButton.single-pet').addClass('single-pet-shown');
With CSS:
.actionButton.single-pet-shown {
display: block !important;
}
-
1Without the rest of his CSS and markup, this is a pure guess, not an educated answer. Commented Sep 13, 2013 at 11:01
-
1
-
@Mr_Green No, it does not. It does not override the css property, it simply removes it. Please read the OP question again. Commented Sep 13, 2013 at 11:04
-
3What if
.single-petalso has some other properties elsewhere in the stylesheet and they are crucial to the document's layout? Commented Sep 13, 2013 at 11:05 -
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_GreenCommented Sep 13, 2013 at 11:10
.actionButton.single-petclass has more css properties rather thandisplay: none !important;?