Theimportant keyword makes a declaration take precedence over normal declarations—those that are not tagged with theimportant keyword. So "p { color: red ! important }" takes precedence over "p { color: green }".
The syntax for an important declaration is
The relative importance of a rule also depends on its the source: whether it comes from a style sheet specified by the document author, the user or the user agent.
The order of declarations from least important to most important:
User important declarations take precedence over everything else. This allows users to override the page designer's presentation to meet their needs. For example a user could override the text colours to be yellow on black in a large font to make the text easier to read.
The process of determining which of the rules from one or more style sheets applies to a given element is called thecascade, hence the nameCascading Style Sheets.
The HTML document used for this example is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><htmllang="en"><head><title>'!important' CSS declarations</title><linkrel="stylesheet"type="text/css"href="style.css"></head><body><p>Paragraph 1.</p><pid="para2">Paragraph 2.</p><p>Paragraph 3.</p></body></html>
The document is styled with the style sheet,style.css:
p{background-color:#fff;color:#000!important}#para2{background-color:#fc9;color:#00f;border:1pxsolidblack}p{background-color:#9cf;color:#f00}
How will the three paragraphs be presented?
Consider the first paragraph element (
Paragraph 1.
).
The first and third selectors (thep selectors) match the element. The second selector (#para2) does not match the element. The rules for the two selectors that match are applied to the element. The rules, listed in the order they appear in the source, are:
| Declaration | Selector | Weighting | ||||||
|---|---|---|---|---|---|---|---|---|
| Specificity | ||||||||
| Property | Value | Importance* | styleattribute | ID selector | Class selector | Element selector | Source order** | |
| background-color | #fff | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 1 |
| color | #000 | p | author important (rank 4) | 0 | 0 | 0 | 1 | 2 |
| background-color | #9cf | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 6 |
| color | #00f | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 7 |
background-color:#9cf is the sixth declaration in the file.The rules that apply to the element are sorted by property. For each property the rules are sorted in ascending order by importance, then by specificity (style attribute, ID selector, class selector, element selector), then by source order. The last value for the property from the sorted list wins (i.e. the value for the most important, most specific rule).
| Declaration | Selector | Weighting | ||||||
|---|---|---|---|---|---|---|---|---|
| Specificity | ||||||||
| Property | Value | Importance | styleattribute | ID selector | Class selector | Element selector | Source order | |
| background-color | #fff | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 1 |
| background-color | #9cf | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 6 |
| color | #00f | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 7 |
| color | #000 | p | author important (rank 4) | 0 | 0 | 0 | 1 | 2 |
Thebackground-color is set to#9cf (a pale blue). The two rules for thebackground-color property have equal importance and specificity so the second rule wins because it occurs later in the source.
Thecolor is set to#000 (black). The rules for thecolor property have different importance so the most important wins.
The first paragraph is rendered:
Paragraph 1.
Consider the second paragraph element (
Paragraph 2.
).
The first and third selectors (thep selectors) match the element. The second selector (#para2) also matches the element. The rules for all three selectors are applied to the element. The rules, listed in the order they appear in the source, are:
| Declaration | Selector | Weighting | ||||||
|---|---|---|---|---|---|---|---|---|
| Specificity | ||||||||
| Property | Value | Importance | styleattribute | ID selector | Class selector | Element selector | Source order | |
| background-color | #fff | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 1 |
| color | #000 | p | author important (rank 4) | 0 | 0 | 0 | 1 | 2 |
| background-color | #fc9 | #para2 | author normal (rank 3) | 0 | 1 | 0 | 0 | 3 |
| color | #00f | #para2 | author normal (rank 3) | 0 | 1 | 0 | 0 | 4 |
| border | 1px solid black | #para2 | author normal (rank 3) | 0 | 1 | 0 | 0 | 5 |
| background-color | #9cf | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 6 |
| color | #00f | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 7 |
Sorting the rules gives:
| Declaration | Selector | Weighting | ||||||
|---|---|---|---|---|---|---|---|---|
| Specificity | ||||||||
| Property | Value | Importance | styleattribute | ID selector | Class selector | Element selector | Source order | |
| background-color | #fff | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 1 |
| background-color | #9cf | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 6 |
| background-color | #fc9 | #para2 | author normal (rank 3) | 0 | 1 | 0 | 0 | 3 |
| border | 1px solid black | #para2 | author normal (rank 3) | 0 | 1 | 0 | 0 | 5 |
| color | #00f | #para2 | author normal (rank 3) | 0 | 1 | 0 | 0 | 4 |
| color | #00f | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 7 |
| color | #000 | p | author important (rank 4) | 0 | 0 | 0 | 1 | 2 |
Thebackground-color is set to#fc9 (a pale orange). The rule with an ID selector has a higher specificity than the other two rules so it wins.
There is only one rule for theborder property so it is set to1px solid black.
Thecolor is set to#000 (black). The rules for thecolor property have different importance so the most important wins.
The second paragraph is rendered:
Paragraph 2.
The third paragraph is matched by exactly the same selectors as the first paragraph and so exactly the same values are applied.
The third paragraph is rendered:
Paragraph 3.
Paragraph 1.
Paragraph 2.
Paragraph 3.
In this example we will examine how the appearance of the document in the previous example is altered when the following user style sheet,user.css, is combined with the style sheet from the previous example. (See the chapterUser Style Sheets for information on how to set a user style sheet.)
p{color:#ff0!important;background-color:#808080;font-family:cursive}
Consider the first paragraph element.The single selector from the user style sheet matches the element.The first and third selectors (thep selectors) fromstyle.css also match the element. The second selector (#para2) fromstyle.css does not match the element. The rules that apply to the element, listed in the order they appear in the source, are:
| Declaration | Selector | Weighting | ||||||
|---|---|---|---|---|---|---|---|---|
| Specificity | ||||||||
| Property | Value | Importance* | styleattribute | ID selector | Class selector | Element selector | Source order** | |
| color | #ff0 | p | user important (rank 5) | 0 | 0 | 0 | 1 | 1:1 |
| background-color | #808080 | p | user normal (rank 2) | 0 | 0 | 0 | 1 | 1:2 |
| font-family | cursive | p | user normal (rank 2) | 0 | 0 | 0 | 1 | 1:3 |
| background-color | #fff | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 2:1 |
| color | #000 | p | author important (rank 4) | 0 | 0 | 0 | 1 | 2:2 |
| background-color | #9cf | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 2:6 |
| color | #00f | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 2:7 |
user.css was loaded beforestyle.css. The second number is the position of the declaration within the file. E.g.background-color:#9cf is the sixth declaration in the second file.Sorting the rules gives:
| Declaration | Selector | Weighting | ||||||
|---|---|---|---|---|---|---|---|---|
| Specificity | ||||||||
| Property | Value | Importance* | styleattribute | ID selector | Class selector | Element selector | Source order** | |
| background-color | #808080 | p | user normal (rank 2) | 0 | 0 | 0 | 1 | 1:2 |
| background-color | #fff | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 2:1 |
| background-color | #9cf | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 2:6 |
| color | #00f | p | author normal (rank 3) | 0 | 0 | 0 | 1 | 2:7 |
| color | #000 | p | author important (rank 4) | 0 | 0 | 0 | 1 | 2:2 |
| color | #ff0 | p | user important (rank 5) | 0 | 0 | 0 | 1 | 1:1 |
| font-family | cursive | p | user normal (rank 2) | 0 | 0 | 0 | 1 | 1:3 |
There are two rules with equal highest importance for thebackground-color property. These two rules also have equal specificity so they are split by source order. The background color is set to the author's choice, not the user's choice.
The important declaration forcolor in the user style sheet has the highest importance for this property so the user's choice of text color is used, not the page author's choice.
The only rule forfont-family is the user's so the user's choice is used.
The paragraphs are rendered:
Paragraph 1.
Paragraph 2.
Paragraph 3.
!important BugThis bug is known to occur in Internet Explorer versions 6.0 and 7.0 on Windows XP; however, version 8.0 is unaffected.
There is a bug in Internet Explorer's handling of!important. If an important declaration for a property is followed by a normal declaration for the same property within the same block Internet Explorer treats both declarations as normal. For example in IE v6.0 the following style sheet incorrectly renders paragraphs as yellow on red. The paragraphs should be white on black because the first two declarations are important.
p{background-color:black!important;color:white!important;background-color:red;color:yellow}
You can check that the declarations revert to normal by adding an extra rule to the style sheet.
p{background-color:black!important;color:white!important;background-color:red;color:yellow}p{color:green}
In IE v6.0 this gives green on red indicating that all thecolor declarations are being treated as normal.
If you remove the secondcolor declaration from the first block:
p{background-color:black!important;color:white!important;background-color:red;}p{color:green}
the paragraphs become white on red. This shows that thecolor declaration in the first block in now correctly considered important.
A number of people suggest using this bug as a means of passing Interent Explorer different values from those given to other browsers. A better solution if you need to do this is to useconditional comments.