Jump to content

Cascading Style Sheets/Important

From Wikibooks, open books for an open world

Overview

[edit | edit source]

The 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:

  1. user agent declarations
  2. user normal declarations
  3. author normal declarations
  4. author important declarations
  5. 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

[edit | edit source]

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">
<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

[edit | edit source]

Consider 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

[edit | edit source]

Consider 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

[edit | edit source]

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.

Result

[edit | edit source]

Paragraph 1.

Paragraph 2.

Paragraph 3.

Example with a User Style sheet

[edit | edit source]

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 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 before style.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 | edit source]

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.

Retrieved from "https://en.wikibooks.org/w/index.php?title=Cascading_Style_Sheets/Important&oldid=3676378"