CSS Cascading Properties

The cascading properties of CSS refer to the principles that govern how CSS rules take precedence over each other when multiple rules are targeting the same element. Understanding them is important when creating style sheets, as this can help minimize possible problems, as well as lead to the creation of cleaner, more efficient style sheets. Three main principles used are last rule, specificity, and inheritance.

1. Last Rule Principle

This principle says that if two rules have identical selectors, then the last one takes precedence. For example, in the example in Figure 8.8, the second selector takes precedence.

2. Specificity Principle

The principle of specificity states that where more than one rule apply to an element, the more specific rule takes precedence over the more general ones. In the example in Figure 8.9, the most specific is div#larger p{} (because it identifies the element specifically), followed by p. larges t{} (because a class selector is more general than an id selector) and then p{} (because a type selector is more general than either).

Note that using the !important exception with any rule gives the rule precedence over all other rules. For instance, using it with the least specific rule in the previous example, as shown in Figure 8.10, gives the rule precedence over the most specific rule.

However, using this exception is not considered a good practice, as it makes debugging (i.e., resolving errors in code) difficult, since it disrupts the natural cascading flow of style sheets. Where it must be used, the advice is to use it only on page-specific CSS designed to override some site-wide or global styles. When used in this way, its effect is more localized and therefore more traceable and manageable.

A more accurate way of determining which CSS rule has precedence is to calculate the specificity of each selector and compare it with the others. This calculation is based on a set of four criteria, designated as a, b, c, and d. Each occurrence of a criterion in a selector counts as 1 for the criterion. So, if only one occurrence is found of the “d” criterion in a selector and nothing else, then the selector’s specificity is 0,0,0,1; if one occurrence of the criterion “d,” two occurrences of the criterion “c,” and nothing else are found, the specificity is 0,0,2,1. Criterion “a” has the most importance, while “d” has the least importance. In theory, one criterion “a” carries more weight than any number of “b,” “c,” or “d.” The four criteria and how they are scored are described as follows:

If declarations are made via a style attribute, rather than via a selector, this represents one count for “a,” so that, the score is a = 1, b = 0, c = 0, d = 0 (or 1,0,0,0).
If declarations are made via id attributes in a selector, the number of such declarations represents the count for “b”
If declarations are made via non-id attributes and pseudo-classes in a selector, the number of such declarations represents the count for
If declarations are made via element names and pseudo-elements, the number of such declarations represents the count for “d.”

According to the criteria, the style attribute has the highest specificity, and this is so because its declarations apply specifically to the element in which it is and to no other. This is followed by the selector with the highest number of id attributes (because an id attribute is specific to only one element), then the selector with the highest number of non-id attributes and pseudo-classes, then the selector with the highest number of element names and pseudo-elements, and then everything else. By applying these criteria to Figure 8.11, the color of the content of the <p> element will be purple. Table 8.5 shows the specificity of each selector, which involves examining each selector and counting the number of occurrences of each of the four criteria.

3. Inheritance

The inheritance principle relates to whether or not child elements get properties passed on to them by the parent elements. Basically, some properties are inherited by default, while others are not. Inheritance determines what happens when no value is specified for a property of an element. When no value is specified for an inherited property of an element, the element uses the value of the parent element. When no value is specified for a non-inherited property of an element, the element uses the default value of the property. The inherit keyword can be used with any property to specify to inherit its value from the parent element. Figures 8.12 and 8.13 show how this works. The content of the <em> element is blue, like that of the <p> element, because the color property is an inherited property, which means that its value is inherited from the parent <p> element. In contrast, the <em> element shows no border even though the parent <p> element does. This is because the border- style property is a non-inherited property, and the default value for it on the <em> element is none (i.e., no border). The color property is discussed more fully in Chapter 9, and the border-style property is discussed in .

The principle of inheritance can save a lot of time, as it prevents having to repeatedly write the same set of rules for child elements that share the same properties. Many properties that are not inherited by default can be forced to inherit values from their parent elements by using inherit as the value for the relevant properties. Figures 8.14-8.16 illustrate this with two <div> elements, which are children of the <body> element.

In the example, the properties specified in the body{} rule (i.e., font- family, color, padding, and margin) are inherited by the two <div> elements, except padding and margin, which are non-inherited by default. The properties specified in the div.partl{} rule (i.e., border and background- color) apply to only the first <div> element, and those specified in the div.part2{} rule apply to only the second <div> element. The second <div> element also inherits the non-inherited padding and margin properties of the <body> element, because it is forced to do so with the use of the inherit keyword as value. Again, all the various properties are used here only to explain inheritance and are discussed more fully in later chapters. The font- family is discussed in Chapter 13; color and background-color are discussed in Chapter 9; and border, padding, and margin are discussed in .