How do you read !important in CSS?

Question

How is the CSS attribute property !important read?

Is it really important, exclamation mark important, ...?

Answer: From the answers below, it seems to be read simply important, or bang important.

However you read it, its clear whoever decided to use "!important" wasn't a C programmer. — Spacedman, Sep 10 '11 at 18:41
When you convert html to pdf through a browser, the `!important` (I pronounce "really important" keyword forces the print preview to apply that property even if the htmltopdf converter insists on making it white in the interest of saving printer ink. It's a "super secret command to override another program trying to countermand this page's instructions", I find these sorts of battles between programs using these switches as a too-and-fro power struggle extremely irritating. It's almost as if a teenager shouting match is taking place in code. yes! No! Yes! No!!! YES!!! — Eric Leschinski, Mar 03 '17 at 03:23

score 63 · Accepted Answer · edited May 23 '17 at 12:10

an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration.

http://www.w3.org/TR/CSS2/cascade.html#important-rules

Basically, where two style rules are the same... it gives the one marked !important greater importance and will apply those styles.

Example

div{
    opacity:0 !important;
}

div.jason{
    opacity:1;
}

The first rule would be applied even though the second rule is more specific (one element + one class as opposed to one element)

Note: IE6 ignores !important when you have two of the same property and one of them is important - it'll always apply the last declaration, whether or not it was marked important. **Added from @BoltClock's comment below.

Warning: !important is a hammer that should only be used when absolutely necessary. Almost always, it is better to use more specific selectors to achieve greater specificity and have your styles applied the way you want. !important can make it very difficult for future developers to find and make changes to your code.

One good use case: !important is great for user-defined styles, where a user wants to manipulate Web site pages in specific way in his browser (say make all the backgrounds black and the text yellow). Without having to worry about specificity, the user can add styles to certain elements (like body) and make the styles render.

IE6 does not always ignore `!important`. It only does when you have two of the same property and one of them is important - it'll always apply the last declaration, whether or not it was marked important. — BoltClock, Sep 10 '11 at 16:37
This explains what "!important" is, but doesn't even pretend to answer the question (which is about terminology: how to read the phrase aloud). — ShreevatsaR, Dec 13 '13 at 10:44
One really "important" use case I know of is related to security, namely anti-clickjacking solution recommended by OWASP: https://www.owasp.org/index.php/Clickjacking_Defense_Cheat_Sheet#Best-for-now_Legacy_Browser_Frame_Breaking_Script — Mike, Dec 08 '15 at 11:55

Matt Ball · Answer 2 · 2013-09-20T13:34:14.927

25

Just "important" or "bang important." The ! is definitely not a negation in this case.

It's not a tag, it's a keyword.

edited Sep 20 '13 at 13:34

answered Sep 10 '11 at 02:27

Matt Ball

354,903
100
647
710

It's not a declaration. `property: value;` is a declaration, `property: value !important;` is an "!important declaration". The `!important` itself doesn't have a name as a whole. – mercator Sep 10 '11 at 19:27
Rereading the CSS2 spec I linked, I think you're partially right. `important` is a keyword, `!important` makes a declaration an "`!important` declaration" (bit of a tautology there). – Matt Ball Sep 10 '11 at 19:29
2

Yay!! `!` here is **NOT** a `not`!! – Jenson M John Aug 02 '16 at 10:34

score 8 · Answer 3 · edited Nov 20 '14 at 15:36

body { color: red !important; } means, in English, "The text-color of red is important".

In terms of how CSS sees it, it applies more "weight" to that declaration, so it will be (far) more likely to be the applied style.

For an example of this, we can use

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

Now, any p with a class of blue will show blue text, all the others will show red text. If we change it to this...

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

They will all show red text (even if they have a class of blue), as we've given more important to the first selector.

score 1 · Answer 4 · edited Jul 22 '12 at 10:05

1

I like to think of it as "NOT important".

p { 
    color: red !important; /* The rest is NOT important for this CSS property. */
}

Meaning that everything else from that declaration and on is NOT important and should not be taken into account. The idea came from the usage of the "!" character as a boolean NOT in many programming languages. This way the !important makes sense as you read it.

edited Jul 22 '12 at 10:05

Nikola K.

7,093
13
31
39

answered May 24 '12 at 10:59

Takis Bouyouris

121
1
7

1

Huh? p { color: red !important; font-weight: bold; } p.foo { color: blue !important; }
Is this text blue and bold?
So explain what's NOT important again? – Dylan Nicholson Jun 05 '14 at 00:33
That breaks the structure of the language in several major ways. It could make a little bit of sense if !important weren't inside brackets and didn't have a semicolon and really applied to everything, not just that one property. – Thinkadoodle Sep 09 '19 at 12:01
My brain always reads the words as "not important", but I know that it actually means "important". It is very confusing. – awe Jan 24 '22 at 08:36

score 1 · Answer 5 · edited Jul 22 '12 at 10:05

1

I guess I read the ! as "very".

p { color: red !important }

I read as "Paragraphs have the color red, which is very important.

edited Jul 22 '12 at 10:05

Nikola K.

7,093
13
31
39

answered Sep 10 '11 at 02:43

Michael Ressler

851
1
9
17

2

By that logic, you'd expect just specifying `important` to work. It's important (no pun intended) to read it all as one entity, "`!important`", not "`!` followed by `important`" – Joe Sep 10 '11 at 02:53

How do you read !important in CSS?

5 Answers5

Linked