Enter CSS selectors to calculate and compare their specificity. Add multiple selectors to see which one wins.
| Selector | Specificity | Level |
|---|---|---|
| * | 0,0,0,0 | Universal |
| div, p, ul | 0,0,0,1 | d - Elements |
| ::before, ::after | 0,0,0,1 | d - Pseudo-elements |
| .class, [attr] | 0,0,1,0 | c - Classes/Attrs |
| :hover, :focus | 0,0,1,0 | c - Pseudo-classes |
| #id | 0,1,0,0 | b - IDs |
| style="" | 1,0,0,0 | a - Inline |
| !important | Overrides all | Trumps specificity |