Can I Override !important?

Answer :

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

As described in w3 spec, !important declarations do not alter the specificity, but rather take precedence over "normal" declarations. Effectively, such declarations only "compete" between themselves - thus, you can override yours with another !important declaration of higher specificity:

/*  these below are all higher-specificity selectors and, if both   rules are applicable to the same element, background colour  will be set to "yellow":  */ .some-class.some-other-class, div.some-class, #some-id {background: yellow !important;} .some-class {background: red !important;} 

There is also the declaration order to consider - a declaration further down in the CSS will take precedence over an earlier one if their selectors have the same specificity.

A case worth noting is when it clashes with an inline declaration. Counterintuitively (but fully in line with the spec), the !important value will come out on top! This means that if you have

<style>   #secret-container {display:none !important;} </style> <script>   $('#secret-container').show();//using jQuery etc. </script> <div id="secret-container">...</div> 

the div in question will remain hidden! The only way to have an inline rule take precedence over an !important one is, well, by applying !important to it as well. I'll let you be the judge of how good a practice that is ಠ_ಠ

There's no overriding inline !important though.

!important will override background: yellow; Try to avoid using !important. Take a look at css specificity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/