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?

Dissect

Make sure you're writing property: value !important, and not important! (like in your question title) or property: value; !important (like in your first demo). In your second demo, you wrote div#green which is looking for <div id="green">, which does not exist in your demo. My point is that you need to ensure you understand more basic issues before worrying about the nuances of !important. – Roseberry

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.

Nasal

Just to clarify your 3rd paragraph, "For two rules with unequal selectors...". Only if there is more than 1 rule, targeting the same element, with an !important declaration, will specificity come into play. Otherwise, the !important declaration will win every time, regardless of specificity. – Parhelion

I used to think that inline style attribute overrides all including the !important also. – Shupe

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.

Lydie

Christopher Altman is correct. Looks like you have the !important incorrectly on the wrong side of the semicolon... also, your second selector is not selecting the div at all... it would just be inheriting from that selector which is why the first one is being used. – Auxiliaries

+1 for the final point here -- if you're using !important a lot then you're probably doing something wrong. – Isola

@zirak - What about it? Your second CSS selector is looking for a div with id="green", which doesn't exist in your example. What exactly are you trying (and failing) to prove? – Wholism

Fine, change the id#green to id#id. It'll not change to red. That's why I don't get it. – Dissect

If you add a space between the id and the class then it will change red. The reason it stays green is because div#id.class is more specific than div#id. Here is a link to a site that explains specifity quite well. I've seen it linked on Stack Overflow once before. – Wholism