CSS: The Definitive Guide, 5th Edition

Chapter 4. Specificity, Inheritance, and the Cascade

Chapters 2 and 3 showed how document structure and CSS selectors allow you to apply a wide variety of styles to elements. Knowing that every valid document generates a structural tree, you can create selectors that target elements based on their ancestors, attributes, sibling elements, and more. The structural tree is what allows selectors to function and is also central to a similarly crucial aspect of CSS: inheritance.

Inheritance is the mechanism by which some property values are passed on from an element to a descendant element. When determining which values should apply to an element, a user agent must consider not only inheritance but also the specificity of the declarations, as well as the origin of the declarations themselves. This process of consideration is what’s known as the cascade.

We will explore the interrelation between these three mechanisms—specificity, inheritance, and the cascade—in this chapter. For now, the difference between the latter two can be summed up this way: when we write h1 {color: red; color: blue;}, the <h1> becomes blue because of the cascade, and any <span> inside the <h1> also becomes blue because of inheritance.

Above all, regardless of how abstract things may seem, keep going! Your perseverance will be rewarded.

Specificity

You know from Chapters 2 and 3 that you can select elements by using a wide variety of means. In fact, the same element can often be selected by two or more rules, ...