27

What I am trying is setting this CSS on element:

background: red !important;

But when I try to do this:

 background: yellow;

it still only shows the red and not the yellow for that one field as I would like it to be (I am not using external CSS).

What I am asking is how to override it, is it possible?

Karol Selak
  • 4,248
  • 6
  • 35
  • 65
Winter Bash
  • 403
  • 1
  • 4
  • 9
  • 12
    And that's why we don't use `!important` kids! You can override `!important` with `!important`. – Christian Jan 22 '13 at 16:07
  • 1
    with another !important, but use after the first one , but usually in 95% of the cases you can avoid using !important – AlexC Jan 22 '13 at 16:08

3 Answers3

40

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

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

enter image description here

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

enter image description here

jsFiddle

NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
  • @teresko: +1, `!important` declarations do not alter the specificity, but rather *take precedence* over "normal" declarations – Oleg Jan 29 '13 at 21:35
  • 3
    According to the articles linked this is not true. and I quote, "The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. ". - I'm just playing devils advocate - I will test this now. and NullPointer + articles are correct for Chrome + Windows at least. http://jsfiddle.net/rlemon/J7HyR/ see here. – rlemon Jan 29 '13 at 21:36
  • Looking for an answer drawing from credible and/or official sources. and that firefox source code is looks fine as an official source and answer is ok and i understand now – Winter Bash Feb 04 '13 at 05:40
  • i didnot knew that its written in c :) – IE kills stay away from it Jun 24 '13 at 11:03
15

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.

Community
  • 1
  • 1
Oleg
  • 24,465
  • 8
  • 61
  • 91
12

!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/