How to override !important?
CssCss Problem Overview
I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !important
declaration:
td {height: 100px !important}
Is there some way I can override this?
Css Solutions
Solution 1 - Css
Overriding the !important modifier
- Simply add another CSS rule with
!important
, and give the selector a higher specificity (adding an additional tag, id or class to the selector) - add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity (first is highest/overrides, third is lowest):
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer:
It's almost never a good idea to use !important
. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important
modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
Solution 2 - Css
Apart from overriding a style set by the style
attribute, the !important
should only be used when you have selectors in your style sheet with conflicting specificity.
But even when you have conflicting specificity, it is better to create a more specific selector for the exception. In your case it's better to have a class
in your HTML which you can use to create a more specific selector which doesn't need the !important
rule.
td.a-semantic-class-name { height: 100px; }
I personally never use !important
in my style sheets. Remember that the C in CSS is for cascading. Using !important
will break this.
Solution 3 - Css
Disclaimer: Avoid !important at all cost.
This is a dirty, dirty hack, but you can override an !important, without an !important, by using an (infinitely looping or very long lasting) animation on the property you're trying to override the importants on.
@keyframes forceYellow {
from {
background-color: yellow;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
margin: 0 auto;
background: red !important;
animation: 1s linear infinite forceYellow;
}
<div></div>
Solution 4 - Css
Okay here is a quick lesson about CSS Importance. I hope that the below helps!
First of all the every part of the styles name as a weighting, so the more elements you have that relate to that style the more important it is. For example
#P1 .Page {height:100px;}
is more important than:
.Page {height:100px;}
So when using important, ideally this should only ever be used, when really really needed. So to overide the decleration, make the style more specific, but also with an override. See below:
td {width:100px !important;}
table tr td .override {width:150px !important;}
I hope this helps!!!
Solution 5 - Css
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Worked for me.
Solution 6 - Css
This can help too
td[style] {height: 50px !important;}
This will override any inline style
Solution 7 - Css
In any case, you can override height
with max-height
.
Solution 8 - Css
You can use higher specificity by going up in selectors.
td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}
You can check the detailed article on how to override css here.
Solution 9 - Css
If you're trying to override an !important
tag that is defined in a class
. Simply specify your property in a id
tag. id
has higher precedence than class
.
Solution 10 - Css
I found really cool trick with :not. If nothing from above helped you, then try this:
.page-width:not(.anything) {
}
Solution 11 - Css
I would like to add an answer to this that hasn't been mentioned, as I have tried all of the above to no avail. My specific situation is that I am using semantic-ui, which has built in !important
attributes on elements (extremely annoying). I tried everything to override it, only in the end did one thing work (using jquery). It is as follows:
$('.active').css('cssText', 'border-radius: 0px !important');