The Cascade: Part 2 (Finally!)

Standards, Style

Exactly one year ago from this day, I published part 1 in a series of articles about CSS cascading and inheritance. However, due to various factors (mostly laziness), the sequel never got published… Until now! Today, I’m going to take a break from the XBL series of articles (which will resume in a day or so) and finally publish the long awaited conclusion to this series. If you haven’t read part 1 (or even if did a long time ago), I suggest you do so now before continuing.

Following on from the first article in which we looked at how to find all the style declarations that applied to each element, we’re going to show how these are sorted by order of precedence, to determine which ones are applied to the element.

Sorting

Steps 2, 3 and 4 of the algorithm deal with sorting the declarations into the order of precedence. From the exercise in the part 1, we were left with 4 rule sets which applied to the p element in the sample document. For the purpose of this exercise, I’m just going to add a few more declarations and annotate them with their origin.

p { margin: 1em 0; } /* User Agent */
* { background: blue none !important; color: white !important; } /* User */
P { text-indent: 1em; text-align: left; } /* User */
p { text-align: justify; } /* User */
#content p { margin: .8em 0; line-height: 1.2; text-indent: 0 !important; } /* Author */
p { line-height: 1.4; } /* Author */

Step 2

Step 2 of the cascade says to sort the rules according to importance and origin. The following is the order of precedence specified in CSS 2.1.

  1. user agent declarations
  2. user normal declarations
  3. author normal declarations
  4. author important declarations
  5. user important declarations

If we discard the selectors for now (they’ll be need again in step 3 below), we’re left with a list of declarations. A declaration is a property and its associated value. We can then proceed to sort them into the order specified.

  1. User Agent Declarations
    1. margin: 1em 0;
  2. User Normal Declarations
    1. text-indent: 1em;
    2. text-align: left;
    3. text-align: justify;
  3. Author Normal Declarations
    1. margin: .8em 0;
    2. line-height: 1.2;
    3. line-height: 1.4;
  4. Author Important Declarations
    1. text-indent: 0 !important;
  5. User Important Declarations
    1. background: blue none !important;
    2. color: white !important;

Step 3

Step 3 of the cascade then says to sort the rules with the same importance and origin by the specificity of the selector. The details of calculating the specificity is out of scope for this article, but it has been covered by others. See Andy Clarke’s Specificity Wars and Molly Holzschlag’s CSS2 and CSS2.1 Specificity Clarified.

This step is important for cases where two declarations for the same property have the same importance and origin. In this example, this occurs for both user normal declarations (two text-align declarations) and author normal declarations (two line-height declarations).

For the user normal declarations, these are the rule sets involved:

p { text-indent: 1em; text-align: left; } /* User */
p { text-align: justify; } /* User */

As you can see, both have the same selector (p), which has a specificy of 0,0,1. So, sorting by specificity in this case makes no difference. However, for the author normal declarations, these are the rule sets involved:

p { line-height: 1.4; } /* Author */
#content p { margin: .8em 0; line-height: 1.2; text-indent: 0 !important; } /* Author */

These 2 rule sets each use different selectors which have different specificity. The selector #content p has a specificity of 101. The selector p has a specificity of 0,0,1. Since 1,0,1 is a higher specificity than 0,0,1, the former takes precedence. So the order of author normal declarations is changed to the following:

  1. margin: .8em 0;
  2. line-height: 1.4;
  3. line-height: 1.2;

Step 4

The forth and final step of the sorting process involves sorting declarations which have the same importance, origin and specificity by the order they are specified in the CSS. This is where the order of the user normal declarations from step 3 is resolved. In this example, given that I listed the declarations in the order in which they appeared, no change needs to be made to the above list.

In cases where there is more than one declaration for a property, the latter declaration overwrites the former, which is effectively discarded. This leaves the following list of declarations to be applied to element.

  1. text-align: justify;
  2. margin: .8em 0;
  3. line-height: 1.4;
  4. text-indent: 0;
  5. background: blue none;
  6. color: white;

This concludes the series about the cascade, but the related issue of inheritence still needs to be addressed and I intend to do so at some point in the future. However, I don’t expect that it will take another year before I do… But who knows? 🙂