CSS

Cascade & Inheritance

The cascade algorithm determines which CSS rules will be applied to an element. For determination, three factors are significant:

  1. Importance

  2. Specificity

  3. 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:

  1. When a second !important statement is placed later in the code

  2. 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)

Further Reading

PreviousCSSNextGit

Last updated