How to override !important?
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.
Can I override !important?
Ans is YES !important
can be overridden but you can not override !important
by a normal declaration. It has to be higher specificity than all other declarations.
However it can be overridden with a higher specificity !important
declaration.
This code snippet in Firefox's parser will explain how it works:
if (HasImportantBit(aPropID)) {
// When parsing a declaration block, an !important declaration
// is not overwritten by an ordinary declaration of the same
// property later in the block. However, CSSOM manipulations
// come through here too, and in that case we do want to
// overwrite the property.
if (!aOverrideImportant) {
aFromBlock.ClearLonghandProperty(aPropID);
return PR_FALSE;
}
changed = PR_TRUE;
ClearImportantBit(aPropID);
}
Good read
- Specifics on CSS Specificity
- CSS Specificity: Things You Should Know
Here's an example to show how to override CSS
HTML
<div id="hola" class="hola"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.hola{ background-color:red !important; }
#hola{ background-color:pink !important;}
and output will be
Also we can not override inline !important
HTML
<div id="demo" class="demo" style="background-color:yellow !important;"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.demo{ background-color:red !important; }
#demo{ background-color:pink !important;}
the output is
More important than !important (a higher level !important)?
No, there is no keyword or other way to make a declaration more important than !important
. There is no known activity to change this.
In general, it is possible to override a declaration that has !important
by using a rule that also has it and that has higher specificity. However, a declaration in a style
attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important
.
There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style
attribute.
Overriding !important style
I believe the only way to do this it to add the style as a new CSS declaration with the '!important' suffix. The easiest way to do this is to append a new <style> element to the head of document:
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('td.EvenRow a {display:inline !important;}')
The rules added with the above method will (if you use the !important suffix) override other previously set styling. If you're not using the suffix then make sure to take concepts like 'specificity' into account.
How to override !important style from external package in angular
Change your style like this:
body .ui-slider .ui-slider-handle {
color: red !important;
}
If your style is loaded after the external style, than the external style will be overridden by your style.
By adding the body
selector to the rule, your rule will be more precise than the one in the external file, and it will have higher priority even if your style will be loaded before the external style.
Related Topics
How to Download a File Without Using ≪A≫ Element With Download Attribute or a Server
Prevent Contenteditable Adding ≪Div≫ on Enter - Chrome
How to Run JavaScript Before the Whole Page Is Loaded
Changing Nav-Bar Color After Scrolling
Any Way to Clone Html5 Canvas Element With Its Content
How to Preserve Line Breaks When Getting Text from a Textarea
How to Create a Sticky Navigation Bar That Becomes Fixed to the Top After Scrolling
Convert Binary Data to Base64 With JavaScript
Only Detect Click Event on Pseudo-Element
How to Normalize the Css3 Transition End Events Across Browsers
"Uncaught Typeerror: A.Indexof Is Not a Function" Error When Opening New Foundation Project
Get Computed Font Size For Dom Element in Js
JavaScript Closure Inside Loops - Simple Practical Example
How to Upload Files Asynchronously With Jquery