ryan's garden

CSS Cascade

3 min read

The cascade in CSS determines what rules get applied to our HTML. There are multiple factors used in this determination

Specificity

A CSS declaration that is more specific will take precedence over less specific ones.

Specificity is only taken into account when as a tiebreaker when an element has multiple conflicting declarations targeting it

Conflicting declarations

A rule consists of one or more declarations. Specificity applies to declarations.

Thus, even if some of a rule’s declarations are overridden in specificity by the declarations of another rule, its non-conflicting declarations can still apply

CSS Selectors in decreasing specificity

  1. ID selector
  2. Class selector
  3. Type selector

Quantity tiebreaking

  • A more specific selector type will beat any number of a less specific selector
  • When no declaration has a selector of higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector

Selector quantity specificity

When no declaration has a selector of higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector

Example 1 

/* rule 1 */
.subsection {
  color: blue;
}
 
/* rule 2 */
.main .list {
  color: red;
}
  • Rule 2 is more specific since it uses more class selectors

Example 2 

/* rule 1 */
#subsection {
  background-color: yellow;
  color: blue;
}
 
/* rule 2 */
.main #subsection {
 color: red;
}
  • Both rules use ID selectors
  • Try quantity tie-breaking of ID selectors - both have 1 so still tied
  • Try quantity tie-breaking of class selectors - Rule 2 has more so it is more specific

The color:red declaration will take precedence, however background-color:yellow will still apply

Symbols and specificity

Symbols for the universal selector and combinators do not add or take away from specificity in and of themselves

Universal selector 

/* rule 1 */
* {
  color: black;
}
 
/* rule 2 */
h1 {
  color: orange;
}

Rule 2 has the higher specificity as the universal selector in Rule 1 has no specificity value at all

Useful resources

Inheritance

Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants.

Typography inheritance

Typography based properties (color, font-size, font-family, etc.) are usually inherited, while most other properties aren’t.

The exception to this typography inheritance is when directly targeting an element, as this always beats inheritance:

Example

<!-- index.html -->
 
<div id="parent">
  <div class="child"></div>
</div>
/* styles.css */
 
#parent {
  color: red;
}
 
.child {
  color: blue;
}

Though the first rule that targets parent (ID selector) has higher specificity, the inheritance by the child div is overridden by the direct targeting of the declaration in the second rule. Thus the text color will be blue

Rule order

The final tie-breaker when every other factor has been taken into account and conflicting rules targeting an element still exist

Whichever rule was defined last is the winner

Graph View

Backlinks