CSS priority
Calculating Specificity Of Selector Expression
A selector expression is a selector or a combination of selectors.
[0] | [0] | [0] | [0] | [0] |
---|---|---|---|---|
⇧ | ⇧ | ⇧ | ⇧ | ⇧ |
!important | style="" | id selector |
class, attribute, psuedo class selectors |
type selector and psuedo element |
For every selector expression we get a five digit priority value from the above diagram. Larger values override smaller values. Same values override based on top to bottom(last selector expression overrides previous ones).