CSS Cascade

The algorithm that determines the "winning value" from a list of competing declarations.

  1. Origin and importance

    1. transition
    5. animation
    6. author
    7. user
    8. browser

    same origin?

  2. Context

    Relevant when you're dealing with the shadow DOM and ::part()

    3. outer (::part)
    4. inner (shadow)

    same context?

  3. The style attribute

    The declarations in a style attribute (inline styles) take precedence over declarations mapped via a style rule.

    no style attribute?

  4. Layers

    5. unlayered
    6. layer N
    7. layer B
    8. layer A

    same layer?

  5. Specificity

    1. ID
    2. class, attribute, pseudo-class
    3. element, pseudo-element

    same specificity?

  6. Scope proximity

    The style that has the smallest number of hops up the DOM tree hierarchy to the scope root wins.

    same proximity? or no scope?

  7. Order of appearance

    Last declaration in the document order wins.