HTML and CSS Reference
In-Depth Information
CHAPTER 2
Specificity and the Cascade
Chapter 1
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 its descendants. When determining which values should apply to an ele-
ment, 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 con-
sideration is what's known as the
cascade
. We will explore the interrelation between
these three mechanisms—specificity, inheritance, and the cascade—in this chapter,
but the difference between the latter two can be summed up this way: choosing the
result of
h1 {color: red; color: blue;}
is the cascade; making a
span
inside the
h1
blue is inheritance.
Above all, regardless of how abstract things may seem, keep going! Your perseverance
will be rewarded.
Specificity
You know from
Chapter 1
that you can select elements using a wide variety of means.
In fact, it's possible that the same element could be selected by two or more rules, each
with its own selector. Let's consider the following three pairs of rules. Assume that each
pair will match the same element:
h1 {color: red;}
body h1 {color: green;}
h2.grape {color: purple;}
h2 {color: silver;}
html > body table tr[id="totals"] td ul > li {color: maroon;}
li#answer {color: navy;}
