CSS Specificity Calculator
| Selector | Specificity |
|---|---|
| * | (0, 0, 0, 0) |
| li | (0, 0, 0, 1) |
| ul li | (0, 0, 0, 2) |
| ul ol+li | (0, 0, 0, 3) |
| h1 + *[rel=up] | (0, 0, 1, 1) |
| ul ol li.red | (0, 0, 1, 3) |
| li.red.level | (0, 0, 2, 1) |
| #x34y | (0, 1, 0, 0) |
| style="..." | (1, 0, 0, 0) |
CSS never adds specificity - it compares tuples. A selector’s weight is the ordered quadruple (inline, IDs, classes, elements), and the cascade picks the winner by comparing column by column, left to right: one ID beats any number of classes, one class beats any number of elements.
This calculator counts the tuple from your four numbers and the table reproduces the canonical examples from MDN - the same li.red.level beats ul ol li case every interview uses.
How to use
- Count each kind of simple selector in your rule and enter the four numbers - pseudo-classes count as classes, pseudo-elements as elements.
- Read the tuple as a ranking, not a sum: (0, 1, 0, 0) outranks (0, 0, 99, 99).
- Remember the escape hatches above the matrix: inline styles and !important, in that order.
Frequently asked questions
Does :not() count as a pseudo-class?
The :not() wrapper itself adds nothing - what is inside it counts. :not(#x) contributes the ID inside, which is why :not(#x) selectors are specificity bombs; the modern :is() and :where() differ too, with :where() always contributing zero.
Why does one ID beat ninety-nine classes?
Specificity compares columns lexicographically, left to right, and the comparison stops at the first difference - the ID column outranks the class column regardless of how many classes pile up below. That is why the pragmatic fix for an overridden rule is a single ID, never more classes.
Where do inline styles and !important fit?
Inline styles win against any selector - their column sits left of IDs - and !important declarations jump above even that, ordered among themselves by normal specificity. The only thing that beats an !important inline style is another !important inline style, or a user !important for accessibility.
How do I override a third-party style without editing it?
Match or beat its specificity inside your own stylesheet, add an ID to the selector for one extra column, or use !important as the documented escape hatch. Order also matters: equal specificity means the later stylesheet wins, so load yours after the library.