464

What does !important mean in CSS?

Is it available in CSS 2? CSS 3?

Where is it supported? All modern browsers?

SOLO
  • 868
  • 9
  • 19
Itay Moav -Malimovka
  • 52,579
  • 61
  • 190
  • 278
  • 3
    http://www.w3.org/TR/CSS2/cascade.html#important-rules – j08691 Feb 12 '12 at 00:35
  • 27
    ... something to avoid whenever possible. – Scott Feb 12 '12 at 00:38
  • 2
    possible duplicate of [How do you read !important in CSS?](http://stackoverflow.com/questions/7369216/how-do-you-read-important-in-css), [What are the implications of using “!important” in CSS?](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) and also see: [when to use !important property in css?](http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css), [When to use “!important” to save the day (when working with CSS)](http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css) – Cody Gray - on strike Feb 12 '12 at 11:36
  • 3
    Not important. (Web developer joke). – Rounin Mar 14 '21 at 15:07
  • With the introduction of CSS layers in near future, this can become be used less if the code is organized properly. – m4n0 May 30 '22 at 07:20

5 Answers5

437

It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'

In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.

Also, ordinarily, a more specific rule will override a less-specific rule. So:

a {
    /* css */
}

Is normally overruled by:

body div #elementID ul li a {
    /* css */
}

As the latter selector is more specific (and it doesn't, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the 'more-', or the 'less-', specific selector as it's always more specific.

If, however, you add !important to the less-specific selector's CSS declaration, it will have priority.

Using !important has its purposes (though I struggle to think of them), but it's much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the neighbourhood.

It also makes debugging your CSS a nightmare (from personal, empirical, experience).

DavidRR
  • 18,291
  • 25
  • 109
  • 191
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 275
    It is also confusing for many developers as in many programming languages the prefix ! means *not*. – rustyx Apr 01 '14 at 14:33
  • 22
    One purpose for !important would be in a GreaseMonkey script where you are purposely overriding other people's CSS that's likely more specific than yours. – Noumenon Apr 29 '14 at 10:29
  • 1
    Officially the W3 [calls it](http://www.w3.org/TR/CSS2/cascade.html#important-rules) a "rule". – JD Smith May 30 '14 at 16:46
  • What if !important is present in both external style sheet and header of the document. Which styling will get override? – Sahil Chhabra Sep 27 '16 at 08:37
  • Under those circumstances, if the rule is equally specific, then the normal CSS rules apply: the style defined 'last' is applied. – David Thomas Sep 27 '16 at 08:42
  • 7
    at least it's not sarcastic and says `important!` (important NOT) – user3553260 Oct 19 '16 at 00:24
  • 2
    You wrote : 'In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document'. It is wrong. – jlguenego Nov 03 '17 at 13:58
  • Useful if: Modifying large css hierarchies without understanding them. E.g.: Applying finishing touches to your page after applying a css framework. Injecting css code into webpages by browser extensions or other means (wordpress e.g.) – Nearoo Nov 19 '19 at 21:31
  • So, !important means its not important and it must be avoided – Nilanshu Jaiswal May 31 '20 at 07:02
  • @JDSmith I'm not sure it does - the "rule" reference I think is referring to rules in general, which (apart from at-rules) are some selectors and some declarations to apply - the closest I can see for an actual name for this is a "marker" - from 'the second declaration will also win due to being marked "!important"'. – Jake Jun 22 '20 at 22:35
  • @jake it's a little confusing as they seem to use it interchangeably - e.g. when they say, 'Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules.' Here they seem to mean that an "!important rule" is a rule containing an !important declaration/marker. – JD Smith Jul 17 '20 at 13:45
142

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

So, if you have the following:

.class {
   color: red !important;
}
.outerClass .class {
   color: blue;
}

the rule with the important will be the one applied (not counting specificity)

I believe !important appeared in CSS1 so every browser supports it (IE4 to IE6 with a partial implementation, IE7+ full)

Also, it's something that you don't want to use pretty often, because if you're working with other people you can override other properties.

Westy92
  • 19,087
  • 4
  • 72
  • 54
nicosantangelo
  • 13,216
  • 3
  • 33
  • 47
  • 1
    IE4+, actually, with bugs, up to and including 6. – BoltClock Feb 12 '12 at 10:41
  • 20
    The confusion happens as `!` is a symbol for NOT in some languages but it's clearer now. – Si8 Mar 13 '14 at 21:00
  • 2
    I'm especially glad that you included the syntax for using `!important`. CSS is different enough from other languages that it's easy to forget how to use certain things. – blainarmstrong Oct 09 '15 at 01:00
  • 4
    @Si8 - Yes, because of that confusion, I've always thought "they" should have defined it as `important!`, or maybe `IMPORTANT!`, rather than `!important`. I wonder if anyone (who might read this) knows why they defined it with the punctuation in front? Obviously, it's way too late to change it now. – Kevin Fegan Sep 07 '18 at 17:13
25

!important is a part of CSS1.

Browsers supporting it: IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.

It means, something like:

Use me, if there is nothing important else around!

Cant say it better.

Cyclone
  • 14,839
  • 23
  • 82
  • 114
  • 5
    `!important` isn't limited to Safari 3+ only; it has supported it from the very beginning like all other non-IE browsers. IE understands it from version 4 onward, but it only supports it bug-free starting from version 7. – BoltClock Feb 12 '12 at 10:40
15

It is used to influence sorting in the CSS cascade when sorting by origin is done. It has nothing to do with specificity like stated here in other answers.

Here is the priority from lowest to highest:

  1. browser styles
  2. user style sheet declarations (without !important)
  3. author style sheet declarations (without !important)
  4. !important author style sheets
  5. !important user style sheets

After that specificity takes place for the rules still having a finger in the pie.

References:

Fabian Barney
  • 14,219
  • 5
  • 40
  • 60
  • As @fabian-barney pointed out `!important` is a modifier for the *cascading order* https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade (see the table for reference). – Doomjunky Aug 30 '19 at 00:27
8

It changes the rules for override priority of css cascades. See the CSS2 spec.

Don Roby
  • 40,677
  • 6
  • 91
  • 113