CSS Cascade and Inheritance

Dr. Greg Bernstein

Updated: September 8th, 2019

The Cascade and Inheritance

Readings

  1. The Most Important CSS Concept to Learn

  2. Cascade and inheritance

The Issue

From MDN:

… you’ll find yourself in the situation where multiple CSS rules will have selectors matching the same element

In such cases, which CSS rule is finally applied to the element is controlled by a mechanism called the Cascade

Weighing the Selectors

Three key concepts (in order of importance) determine which rule wins:

  1. Importance
  2. Specificity
  3. Source order

Importance

In CSS, there is a special piece of syntax you can use to make sure that a certain declaration will always win over all others:

!important

Importance Example (HTML)

From MDN:

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

Importance Example (CSS)

#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

Importance Example (rendering)

This is a paragraph.

One selector to rule them all!

Specificity

Specificity is basically a measure of how specific a selector is — how many elements it could match.

How Specific?

  • element selectors have low specificity.
  • Class selectors have a higher specificity,
  • ID selectors have an even higher specificity,

Computation of Specificity

See the references, I only remember the previously mentioned rules.

Source Order

From MDN:

if multiple competing selectors have the same importance and specificity, the third factor that comes into play to help decide which rule wins is source order

Source Order Example

Toggling a hidden element:

.hideStuff {
  display: none;
}

.showStuff {
  display: block;
}

Source Order Example

What happens if I apply both hideStuff and showStuff classes to an element?

What happens if I apply only hideStuff?

Inheritance

From MDN:

The idea is that some property values applied to an element will be inherited by that element’s children, and some won’t.

Which properties are inherited by default and which aren’t is largely down to common sense?

Inheritance Example

Look up the property in:

Inheritance Example: font-family

For example font-family

Inheritance Example: margin

margin