When the same element is selected by two or more rules, specificity is used to determine which rule wins 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.
- Combinators and the universal selector do not contribute anything to the specificity.
Universal selector has a specificity of 0, 0, 0, 0
Combinators have no specificity at all, not even zero.
Examples:
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 */
*.bright {color: yellow;} /* specificity = 0,0,1,0 */
p.bright em.dark {color: maroon;} /* specificity = 0,0,2,2 */
#id216 {color: blue;} /* specificity = 0,1,0,0 */
div#sidebar *[href] {color: silver;} /* specificity = 0,1,1,1 */
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 */
html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */
- Specificity is sorted from left to right. A specificity of 1, 0, 0, 0 will win out over any specificity that begins with a 0, no matter what the rest of the numbers might be.
- Every inline style declaration has a specificity of 1, 0, 0, 0
- Important declarations:
p.dark {color: #333 !important; background: white !important;}
Declarations that are marked !important do not have a special specificity value, but are instead considered separately from nonimportant declarations. In effect, all !important declarations are grouped together, and specificity conflicts are resolved relative to each other. Similarly, all nonimportant declarations are considered together, with property conflicts resolved using specificity. In any case where an important and a nonimportant declaration conflict, the important declaration always wins.
=====================================================================================
Inheritance is the mechanism by which styles are applied not only to a specified element, but also to its descendants.
Inherited values have no specificity at all, not even zero specificity.
Example:
* {color: gray;}
h1#page-title {color: black;}
<h1 id=”page-title”>Meerkat <em>Central</em></h1>
<p>
Welcome to the best place on the web for meerkat information!
</p>
In this example, the word “central” will be gray because zero specificity defeats no specificity.
======================================================================================
Cascade rules for CSS:
- Find all rules that contain a selector that matches a given element.
- Sort by explicit weight all declarations applying to the element. Those rules marked !important are given higher weight than those that are not. 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. Both 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.
There are five levels to consider in terms of declaration weight (from the origin of the rule). In order of most to least weight, these are:
- Reader important declarations
- Author important declarations
- Author normal declarations
- Reader normal declarations
- User agent declarations
By Bryan Xu