π― CSS Specificity Calculator
Compare two selectors: get the (a, b, c) triple, a per-part breakdown, and the winner.
Specificity Verdict
How to Use This Specificity Calculator
Enter two competing CSS selectors and the tool scores both, breaks down where each point comes from, and declares the winner.
Type or paste Selector A and Selector B into the two boxes. Results update live as you type.
Read each selector's specificity triple (a, b, c) and the illustrative score in the breakdown table.
Check the verdict: which selector wins, and at which column (IDs, then classes, then elements) the decision was made.
Use the breakdown to fix losing rules: add a class or attribute to the loser, or remove an ID from the winner.
How Specificity Scoring Works
CSS compares specificity as a triple, column by column from left to right. Count IDs for column a. Count classes, attribute selectors, and pseudo-classes (like :hover, :nth-child) for column b. Count element names and pseudo-elements (like ::before, ::after) for column c. The universal selector * and combinators add nothing. A higher a wins outright; only if a ties does b matter, and only if b ties does c matter. That is why one ID beats any number of classes: (1, 0, 0) outranks (0, 50, 0) because the comparison stops at the first column. The familiar score (a x 100 + b x 10 + c) is a handy shortcut that matches the triple result in everyday cases, but it is not real math: treat the triple as the truth. Two special cases: :not() itself adds nothing, but its argument counts normally, and :where() adds nothing at all, not even its argument.
Worked Example
Selector A: #nav .item a. The ID #nav gives a = 1. The class .item gives b = 1. The element a gives c = 1. Triple (1, 1, 1), illustrative score 111. Selector B: ul#nav li.active a:hover. The ID #nav gives a = 1. The class .active and the pseudo-class :hover give b = 2. The elements ul, li, a give c = 3. Triple (1, 2, 3), illustrative score 123. Column a ties at 1, so the comparison moves to column b: 2 beats 1, and Selector B wins. That is exactly the trap developers hit: the longer-looking selector with the pseudo-class quietly outranks the shorter ID selector.
Common Specificity Pitfalls
Frequently Asked Questions
What is CSS specificity?
Specificity is the scoring system CSS uses to decide which rule wins when several rules target the same element. It is written as a triple (a, b, c): a counts ID selectors, b counts classes, attributes, and pseudo-classes, and c counts element names and pseudo-elements. A selector with a higher a always beats one with a lower a, no matter what b and c are.
Why does my CSS rule not apply even though it comes later?
Because an earlier rule with higher specificity beats a later rule with lower specificity. Order only breaks ties. If #nav a sets the color and later .link tries to override it, #nav a wins because its ID gives it (1, 0, 1) against (0, 1, 0). Raise the losing selector's specificity or lower the winner's.
Does :not() add specificity?
The :not() itself adds nothing, but everything inside its parentheses counts normally. So a:not(.active) has the same specificity as a.active: one element (c) plus one class (b), giving (0, 1, 1).
What is the difference between :hover and ::before?
:hover is a pseudo-class, so it counts in b like a class. ::before is a pseudo-element, so it counts in c like an element name. The single-colon legacy forms :before, :after, :first-line, and :first-letter are treated as pseudo-elements too.
Is the 100/10/1 score exact?
It is a useful illustration, not exact math. Real CSS compares the triple left to right, and eleven classes (0, 11, 0) beat one ID? No: one ID (1, 0, 0) beats any number of classes. The score 100/10/1 can mislead past 10 items per column, so always trust the triple comparison, which is what this tool shows.