CSS Cascade

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

Step 1:
Origin and importance
1. transition
2. important browser
3. important user
4. important author
5. animation
6. author
7. user
8. browser
same origin? then go to
Step 2:
Context
Relevant when you're dealing with the shadow DOM and ::part()
1. important inner (shadow)
2. important outer (::part)
3. outer (::part)
4. inner (shadow)
same context? then go to
Step 3:
The style attribute

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

no style attribute? then go to
Step 4:
Layers
1. important layer A
2. important layer B
3. important layer N
4. important unlayered
5. unlayered
6. layer N
7. layer B
8. layer A
same layer? then go to
Step 5:
Specificity
1. ID
2. class, attribute, psuedo-class
3. element, psuedo-element
4. universal selector, next sibling combinator, child combinator, subsequent-sibling combinator
same specificity? then go to
Step 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? then go to
Step 7:
Order of appearance

Last declaration in the document order wins.