Cascade & Inheritance
The cascade algorithm determines which CSS rules will be applied to an element. For determination, three factors are significant:
- Importance
- Specificity
- Source order
Importance
To keep this short: If a CSS rule has applied !important to it, it will win in almost all cases.
<a id="button" href="#">Buy now</a>/* A very specific rule */
#button {
background-color: green;
}
/* This will win anyway */
a {
background-color: red; !important
}A good rule of thumb is to never use !important.
There are some exceptions where !important can be overridden:
- When a second
!importantstatement is placed later in the code - When another stylesheet with a higher priority overrides the rule
Specificity
Rules are ordered by specificity, the rule with the highest specificity is applied. To rank the specificity of a rule, a point system is applied.
| Type | Points |
|---|---|
Inside a <style> tag or inline styles | 1000s |
#IDs | 100s |
.classes, attribute-selectors (a[href="home"]) or :pseudo-classes | 10s |
| Element selectors | 1s |
These numbers are added, so a rule like
#button .primary a:hover {
color: green'
}would have a score of 121.
Source Order
Simply put: Later rules in the stylesheet override earlier ones with the same score.
Also, different stylesheets have different priorities. For example, the author stylesheet has a higher priority than the user agent stylesheet (that’s the reason CSS resets can exist).
| Rank | Origin | Importance |
|---|---|---|
| 1 | user agent | normal |
| 2 | user | normal |
| 3 | author | normal |
| 4 | CSS Animations | it’s complicated |
| 5 | author | !important |
| 6 | user | !important |
| 7 | user-agent | !important |
(A higher rank means higher priority)