Topics

The Cascade, Specificity, and Inheritance

• The Cascade toggle
  • The cascade is the accumulation of selector patterns to apply properties to elements.
  • Question: If two or more selectors find the same element, who wins? toggle
    • Step 1: Find all declarations for a particular element.
    • Step 2: Sort the declarations according to importance and origins.
    • Step 3: Sort the ties by selector specificity.
    • Step 4: Sort the ties by declaration order—last one wins!
• Step 2: Origins and importance toggle
  • Origins: user agent style sheets, author style sheets, user style sheets
  • Origins and importance (important!): toggle
    • user agent declarations
    • normal declarations in user style sheets
    • normal declarations in author style sheets
    • important declarations in author style sheets
    • important declarations in user style sheets
• Step 4: Declaration order toggle
  • Same declaration block, same style sheet, another style sheet
  • Order of <link> elements matters!
  • No preference over <style> or <link>!
• Step 3: Specificity toggle
  • Step 1: inline style beats selector.
  • Step 2: selector with most ID selectors wins.
  • Step 3: selector with most class selectors + attribute selectors + pseudo-classes wins.
  • Step 4: selector with most element type selectors + pseudo-elements wins.
• Inheritance toggle
  • What if a property for an element is not explicitly defined?
  • Inheritance: children inherit some properties of their parents in the DOM. toggle
    • Inherited: font-size, color, etc.
    • Not inherited: background-color, borders, etc.
    • inherit property value