COM271, Week 3
The cascade
Inheritance, specificity, and the cascade
Syllabus | Table of Pages | Assignments | References and Useful Links
Resolving Conflicts Between CSS Rules
Our first look at selectors showed that there may be several ways for an html element to be selected. Selectors include
- simple elements
- classes
- id's
- descendent orders of elements
So what if there are conflicts? For example, if the style sheet includes
p{color:white;}
#contents p{color:blue;}
What do we know about the color of a paragraph?
One factor in deciding which rule will be used ("win out") is the specificity of rules. Here is what Meyer says:
The answer is found in the specificity of each selector. For every rule, the user agent [=browser] evaluates the specificity of the selector and attaches it to each declaration inthe rule. When an element has two or more conflicting property declarations, the one with the highest specificity will win out.
A selector's specificity is determined by the components of the selector itself. A specificity value is expressed in four parts, like this: 0, 0, 0, 0. The actual specificity of a selector is determined as follows:
- For every ID attribute value given in the selector: add 0,1,0,0.
- For every class attribute value, attribute selection, or pseudo-class given in the selection, add 0,0,1,0.
- For every element and pseudo-element given in the selector, add 0, 0, 0, 1.
For example, the following rules' selectors result in the indicated specificities:
- h1 {color: red;} /* specificity = 0, 0, 0, 1 */
- p em {color: purple;} /* specificity = 0, 0, 0, 2 */
- .grape {color: purple;} /* specificity = 0, 0, 1, 0 */
- p.bright em.dark {color: maroon;) /* specificity = 0, 0, 2, 2 */
- #id26 {color: blue;} /* specificity = 0, 1, 0, 0 */
What wins in the following?
h1 {color:red;} /* 0, 0, 0, 1 */
body h1 {color:green;} /* 0, 0, 0, 2 (winner) */
h2.grape { color: purple } /* 0, 0, 1, 1 (winner) */
h2 { color: silver;} /* 0, 0, 0, 1 */
—Meyer, 2007, p. 63-64
But what is the final (left-most) column for? It is reserved for in-line styles. These have higher specificity than any rule from a style sheet, and thus always win.
If I have a style rule
h1 { color: green;}
and an inline style
<h1 style="color:red;">The University of Rhode Island</h1>
the style attribute always wins.
Importance
It is also possible to make some declarations so important that they outweigh all other considerations. These are called important declarations and you can mark them by inserting !important just before the terminating semicolon:
p.warn { color: #f9c !important; background: yellow; }
Inheritance
A style applied to an element is also applied to any elements that it contains. For example, if I set
ul {color:yellow;}
then list items contained within the list are also yellow. This is the idea of inheritance.
The Cascade
So how are conflicting rules sorted out to decide which ones win. Meyers lists 4 steps:
- Find all rules that contain a selector that matches a given element.
- Sort by explicit weight all declarations applying to the element. Sort by origin all declarations applying to a given element. There are three origins: author, reader, and user agent. Under normal circumstances, the author's styles win out over the reader's styles. !important reader styles are stronger than any other styles, including !important author styles. Bother author and reader styles override the user agent's default styles.
- Sort by specificity all declarations applying to a given element. Those elements with a higher specificity have more weight than those with lower specificity.
- Sort by order all declarations applying to a given element. The later a declaration appears in the style sheet or document, the more weight it is given. Declarations that appear in an imported style sheet are considered to come before all declarations within the style sheet that imports them.