CSS specificity decides which rule wins when several target the same element, and getting it wrong is a common cause of “why won’t my style apply?” bugs. This calculator parses any CSS selector and reports its (a, b, c) specificity score, with a breakdown explaining each part — so you can predict which rule the browser will honour.
How it works
Specificity is a three-part score compared left to right:
- a counts ID selectors (
#id). - b counts classes, attribute selectors (
[type="text"]) and pseudo-classes (:hover). - c counts element types (
div) and pseudo-elements (::before).
A higher a always beats any b, which always beats any c — so a single ID outranks any number of classes. The calculator also handles modern functional pseudo-classes: :is(), :not() and :has() take the specificity of their most specific argument, while :where() always contributes 0. These rules are noted in the breakdown.
Example
For the selector #nav .item a:
| Part | Selector | Contributes |
|---|---|---|
| a | #nav | 1 |
| b | .item | 1 |
| c | a | 1 |
The score is (1, 1, 1). This beats .item .link a (which is (0, 2, 1)) because its single ID outranks any number of classes, no matter how many. Everything is parsed in your browser, so nothing is uploaded.