Web Design in a Nutshell, 3rd Edition

Rule order

Finally, once styles have been sorted by author, attachment method, and specificity, there may still be conflicts within a single style sheet source. When a style sheet contains several conflicting rules of identical weight, whichever one comes last has the most weight and overrides the others in the list. For instance, in the following example, all of the first-level headings in the document would be red, because the last rule wins.

    h1 {color: green;}
    h1 {color: blue;}
    h1 {color: red;}

This “last-one-listed wins” scenario was mentioned earlier in relation to multiple link elements and @import commands. It also applies within a single declaration block. In the following example, the first declaration makes the border on all sides of a div gray using the shorthand border-color property. The second declaration conflicts with the first by specifying that the top border should be black. Because the declaration listed second overrides the first, the resulting div will have a black top border and gray borders on the three remaining sides.

Calculating Specificity

There is more to the story of how specificity is determined. The W3C developed a numbering system that expresses a selector’s weight value in four parts (a, b, c, d), in which each part is a tally of the selector’s particular components:

• a equals 1 if the rule is a style attribute value rather than a selector. For rules using selectors, a=0. In this way, inline styles will always win out over embedded or external style ...