Two CSS rules can target the same element and assign different values to the same property. The cascade is the browser’s process for choosing which declaration takes effect. Understanding that decision makes styles easier to predict when a page or stylesheet changes. section 1.1
Listing 1.2 Conflicting declarations
h1 { #1
font-family: serif;
}
#page-title { #2
font-family: sans-serif;
}
.title { #3
font-family: monospace;
}
All three selectors match the heading, but the ID selector wins even though its rule appears before the class rule. The rendered title uses a sans-serif font. section 1.1
When declarations compete, check why one has priority:
- Origin and importance: author styles normally override browser defaults. Adding !important changes priority; important declarations from user-agent, user, and author origins rank above normal declarations, in that order. section 1.1.1
- Specificity: a more specific matching selector can beat a later, less specific one. IDs, classes, and tag names contribute to this comparison. section 1.1 section 1.6
- Source order: when the other criteria tie, the later declaration wins, including one in a stylesheet included later on the page. section 1.1.4
- Cascade layers provide another way to express rule priority when specificity and source order do not reflect the intended result. section 8.1
A featured navigation link
Suppose ordinary navigation links are teal and a featured link should be orange. Equal-specificity selectors such as .nav a and a.featured let the later rule set the featured background. But an a.featured link outside the navigation then gets an orange background without the navigation link’s other button styles. Choose the selectors with their intended reuse in mind, not merely to make one link look right. section 1.1.4
aside {
background-color: #333333; #1
background-color: #333333aa; #2
}
The first background color is a usable fallback. A browser that understands the later eight-digit hex value uses it; one that does not understand it ignores that declaration and keeps the first. section 1.5.1
The cascade resolves each property on each element independently. It is not inheritance: when certain properties have no cascaded value on an element, they can instead inherit a value from its parent. Custom properties also cascade and inherit, allowing a value defined for the page to be replaced within a particular container. section 1.1.1 section 1.6 section 2.6.1
