Step 1:
Origin and importance
- transition
- important browser
- important user
- important author
- animation
- author
- user
- browser
same origin? then go to
Step 2:
Context
Relevant when you're dealing with the shadow DOM and
::part()
- important inner (shadow)
-
important outer (
::part) - outer (
::part) - 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 inline styles? then go to
Step 4:
Layers
- important layer A
- important layer B
- important layer N
- important unlayered
- unlayered
- layer N
- layer B
- layer A
same layer? then go to
Step 5:
Specificity
- ID
- class, attribute, psuedo-class
- element, psuedo-element
- 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.