Knowledge
  • ⚡️ Knowledge
  • Talks I like
  • Thinking
  • Unix
  • CSS
    • CSS
  • Git
    • git
  • business
    • concepts
  • databases
    • PostgreSQL
  • dev-ops
    • Docker
    • heroku
  • javascript
    • javascript
    • Jest
    • Readme
      • General
      • Libraries
        • React_DnD
  • npm
    • npm cheatsheet
  • people
    • Active Listening
  • productivity
    • focus
    • reviews
  • reading-log
    • 12 Rules for Life
    • nonfiction
  • ruby-on-rails
    • Active Storage
    • bundler
    • file-io
    • Migrations
    • patterns
    • rake-tasks
    • views
  • stoicism
    • Notes
  • food-drink
    • coffee
      • Coffee Beans
  • tools
    • macOS
      • Things
    • services
      • Trello
Powered by GitBook
On this page
  • Cascade & Inheritance
  • Importance
  • Specificity
  • Source Order
  • Further Reading
  1. CSS

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 6 years ago

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance