⌨️
Web Design
  • Index
  • Front End
    • Front End Index
  • HTML/CSS/JS
    • HTML Index
      • Page layout
      • Form
      • Image Optimization
    • CSS Index
      • CSS Selectors
        • Selectors
        • Combinators
        • Attribute Selectors
        • Pseudo classes
      • CSS Cascade and Inheritance
        • Cascade
        • Inheritance
      • Specificity
      • Box Model
      • CSS Clearfix
      • Responsive Meta Tag
      • Flexbox Layout
      • Grid Layout
      • CSS Naming Rules
        • Golden Guidelines for Writing Clean CSS
        • BEM
        • Rules
      • Frameworks & Libraries
    • JS Index
      • JS loading
      • Modules
      • Js Array Common Method 1
      • Js Array Common Method 2
      • Custom attributes on the element
      • Operator
      • Parse a JSON Date in JavaScript
      • Importmap
  • Git
    • Git Index
    • Initialize a Repository
    • Top 20 Git Commands With Examples
  • UML
    • UML Class
  • React
    • Index
      • setState async issue
      • Redux
      • Axios
      • useState update in A Timeout
  • WebGL
    • WebGL Index
  • Back End
    • Back-End Index
      • Knex
      • Bookshelf
        • bookshelf install
        • Bookshelf only returns one row
      • Server side init flow
      • Install Wordpress on Ubuntu 22.04 with a LAMP Stack
  • React Native
    • React Native Index
      • Dynamically changing Image URLs in React Native
  • Expo
    • EAS build config
Powered by GitBook
On this page
  • Origin and Importance
  • Specificity
  • Order of Appearance

Was this helpful?

  1. HTML/CSS/JS
  2. CSS Index
  3. CSS Cascade and Inheritance

Cascade

PreviousCSS Cascade and InheritanceNextInheritance

Last updated 4 years ago

Was this helpful?

According to the W3C:

The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single cascaded value. The cascade sorts declarations according to the following criteria, in descending order of priority:

Origin and Importance

The origin of a declaration is based on where it comes from and its importance is whether or not it is declared !important The precedence of the various origins is, in descending order:

  1. Transition declarations

  2. Important user declarations

  3. Important author declarations

  4. Important user agent declarations

  5. Animation declarations

  6. Normal user declarations

  7. Normal author declarations

  8. Normal user agent declarations

Declarations from origins earlier in this list win over declarations from later origins.

Specificity

The describes how to compute the specificity of a selector. Each declaration has the same specificity as the style rule it appears in. For the purpose of this step, declarations that do not belong to a style rule (such as the ) are considered to have a specificity higher than any selector. The declaration with the highest specificity wins.

Order of Appearance

The last declaration in document order wins. For this purpose: Declarations from imported style sheets are ordered as if their style sheets were substituted in place of the @import rule. Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language. Declarations from style attributes are ordered according to the document order of the element the style attribute appears on, and are all placed after any style sheets.

Selectors module
contents of a style attribute