How to Override !Important

How to override !important?

Overriding the !important modifier

1. Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
2. 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.

Override !important In WordPress Parent Theme

Use the Body tag in front of it... be more specific:

body .thm-unit-test h3 {
    font-size: 28px !important;
}

Or other parent elements...

Take some time to understand CSS Selector Priority:

Understanding CSS selector priority / specificity

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than
a rule with a selector, 0 otherwise (= a) (In HTML, values of an
element's "style" attribute are style sheet rules.

These rules have no
selectors, so a=1, b=0, c=0, and d=0.) count the number of ID
attributes in the selector (= b) count the number of other attributes
and pseudo-classes in the selector (= c) count the number of element
names and pseudo-elements in the selector (= d) The specificity is
based only on the form of the selector.

the form "[id=p33]" is counted as an attribute selector (a=0, b=0,
c=1, d=0), even if the id attribute is defined as an "ID" in the
source document's DTD. Concatenating the four numbers a-b-c-d (in a
number system with a large base) gives the specificity.

In particular, a selector of the form "[id=p33]" is counted as an attribute selector
(a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source
document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the > specificity.

https://www.w3.org/TR/CSS2/cascade.html#cascading-order

I'd use an ID in front of it tbf.

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