CSS priority
Updated
•1 min readCalculating 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).
