Using !important with CSS

The CSS !important declaration is something I've seen in CSS code before but never knew what it meant until a few days ago, so I thought I'd write a post looking at !important to show what it does.

CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence.

The easiest way to explain this is with some examples.

Example #1: Normal behaviour

Let's say we declared paragraph tags in the #example div to be colored blue, and then further down the style sheet (or in another style sheet also linked to in the page) that they be colored red:

#example p {
color: blue;
}
...
#example p {
color: red;
}

The later rule overrides the earlier rule, and paragraphs within #example will be red.

Example #2: Using !important

If we assigned !importand to the first rule, then the second rule would be ignored because the first rule now has precedence:

#example p {
color: blue !important;
}
...
#example p {
color: red;
}

The first rule now has precedence so the later rule is ignored and the paragraph will be blue.

Example #3: !important declared again

If the !imporant declaration is used again in the later definition, then the normal cascading rules will apply, and the style assigned will be the latest !important one:

Some notes about Internet Explorer

Naturally this works in all currently used browsers with exceptions for Internet Explorer - but then would you expect any different?

Internet Explorer 6 will apply whatever the last style declared is, and takes no notice of !important declarations. So in Example #1 above, the other browsers would display the paragraph in blue but IE6 would display it in red.

The situation was fixed in IE7, but if it's in quirks mode, or you don't specify a doctype at all, then IE7 will revert to the same behaviour as IE6 and use the last declaration.

Internet Explorer 8, on the other hand, seems to always support !important declarations no matter what I did to try to make it act quirky.