Relationship between !important and CSS specificity

Question

Looking at the CSS specificity specification, there is no mention about how many "points" the !important rule is worth.

When does one override another? What happens if one is declared after the other? Which rule is declared to be more important? Is there some sort of pattern?

From the looks of it, !important applies to what has more specificity points to begin with. But what will happen if I declare a bazillion id's stacked with classes and nested deeply? Will it override the rules set in another, less specified rule marked with !important?

Answer 1

Specificity in CSS only concerns selectors, not their associated declarations. !important applies to a declaration, so it alone plays no role in specificity.

However, !important influences the cascade, which is the overall calculation of styles for a certain element when more than one of the same property declaration applies to it. Or, as Christopher Altman succinctly describes:

1. !important is a spades card. It trumps all specificity points.

But not only that: because it influences the cascade overall, if you have more than one !important selector with a rule containing an !important declaration matching the same element then selector specificity will continue to apply. Again, this is simply due to having more than one rule applying to the same element.

In other words, for two rules with unequal selectors in the same stylesheet (e.g. same user stylesheet, same internal author stylesheet, or same external author stylesheet), the rules with the most specific selector apply. If there are any !important styles, the one in the rule with the most specific selector wins. Finally, since you can only have something that's either important or not, that's quite as far as you can go in influencing the cascade.

Here's an illustration of the various uses of !important and how they're applied:

• The !important declaration always overrides the one without it (except in IE6 and older):

  /* In a <style> element */
  #id {
      color: red !important;
      color: blue;
  }
  

• If there is more than one !important declaration in a rule with the same level of specificity, the later-declared one wins:

  /* In a <style> element */
  #id {
      color: red !important;
      color: blue !important;
  }
  

• If you declare the same rule and the same property in two different places, !important follows the cascading order if both declarations are important:

  /* In an externally-linked stylesheet */
  #id {
      color: red !important;
  }
  
  /* In a <style> element appearing after the external stylesheet */
  #id {
      color: blue !important; /* This one wins */
  }
  

• For the following HTML:

  <span id="id" class="class">Text</span>
  

  If you have two different rules and one !important:

  #id {
      color: red;
  }
  
  .class {
      color: blue !important;
  }
  

  That !important always wins.

  But when you have more than one !important:

  #id {
      color: red !important;
  }
  
  .class {
      color: blue !important;
  }
  

  The #id rule has a more specific selector, so that one wins.

Answer 2

The way I think about it is this:

1. !important is a spades card. It trumps all specificity points. To your specific question, the !important will override a bazillion id/classes.

2. !important resets the cascade. So, if you use a !important below another !important, the second instance rules.

There is a more technical answer out there, but that is how I think about !important.

One more note, if you are using !important you need to step back and check if you are doing something wrong. !important implies you are working against the cascade of CSS. You should use !important in rare cases.