Cascading Style Sheets/Important
Overview
editThe important
keyword makes a declaration take precedence over normal declarations—those that are not tagged with the important
keyword. So "p { color: red ! important }" takes precedence over "p { color: green }".
The syntax for an important declaration is
- property: value ! important
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 agent declarations
- user normal declarations
- author normal declarations
- author important declarations
- user important declarations
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 the cascade, hence the name Cascading Style Sheets.
An Example of the Cascade
editThe HTML document used for this example is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>'!important' CSS declarations</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Paragraph 1.</p>
<p id="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:1px solid black
}
p {
background-color:#9cf ;
color:#f00
}
How will the three paragraphs be presented?
First paragraph
editConsider the first paragraph element (
Paragraph 1.
).
The first and third selectors (the p
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* | style attribute |
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 |
- * The ranks for importance range from 1 (least important) to 5 (most important). Later examples on this page show other ranks.
- ** The source order column is the position of the declaration in the file, e.g.
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 | style attribute |
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 |
- The declarations that are used are shown in bold along with the winning tie-breaker that decided between the rules.
The background-color
is set to #9cf
(a pale blue). The two rules for the background-color
property have equal importance and specificity so the second rule wins because it occurs later in the source.
The color
is set to #000
(black). The rules for the color
property have different importance so the most important wins.
The first paragraph is rendered:
Paragraph 1.
Second paragraph
editConsider the second paragraph element (
Paragraph 2.
).
The first and third selectors (the p
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 | style attribute |
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 | style attribute |
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 |
The background-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 the border
property so it is set to 1px solid black
.
The color
is set to #000
(black). The rules for the color
property have different importance so the most important wins.
The second paragraph is rendered:
Paragraph 2.
Third paragraph
editThe 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.
Result
editParagraph 1.
Paragraph 2.
Paragraph 3.
Example with a User Style sheet
editIn 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 chapter User 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 (the p
selectors) from style.css
also match the element. The second selector (#para2
) from style.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* | style attribute |
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 |
- * The ranks for importance range from 1 (least important) to 5 (most important). Notice that rules from the user style sheet are either rank 2 for normal declarations or rank 5 for important declarations.
- ** The first number in the source order column gives the order the file containing the rule was loaded in. In this case
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* | style attribute |
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 the background-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 for color
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 for font-family
is the user's so the user's choice is used.
The paragraphs are rendered:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Internet Explorer !important
Bug
edit
This 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 the color
declarations are being treated as normal.
If you remove the second color
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 the color
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 use conditional comments.