When two CSS rules target the same element and set the same property, specificity decides which one applies. Paste one or more selectors, one per line, and this calculator scores each as three numbers (ids, classes, elements), ranks them, names the winner and shows exactly which parts of the selector were counted.
Several rules can match the same element and set the same property. The browser picks one by checking, in order, the importance and origin of the declaration, the cascade layer, the specificity of the selector, and finally the order in the source. Specificity is the third check, so it only matters when the earlier ones are equal.
The score has three columns that are never added together. An id in the first column outranks everything in the second and third, and a class in the second column outranks any number of element names. That is why stacking up many elements or many classes does not give you a way to beat an id.
Specificity problems usually come from rules that are too strong rather than too weak. Once a stylesheet contains ids, long descendant chains or !important, the only way to override them is to write something stronger, and the whole sheet drifts upward. A flat set of single-class selectors keeps overrides predictable, because the later rule simply wins.
Modern CSS gives you tools to adjust this on purpose. Wrapping defaults in :where() gives them a zero score, and cascade layers let you put whole groups of rules in a fixed order regardless of their selectors. Use the calculator to check a puzzling rule, then decide whether to raise the winner, lower the loser or restructure the selectors.
Count three groups: ids (a), then classes, attributes and pseudo-classes (b), then element names and pseudo-elements (c). The selector #nav .item a:hover has one id, two classes (.item and :hover) and one element, so its score is 1,2,1. The universal selector and combinators add nothing.
Compare the first number, then the second, then the third. 1,0,0 beats 0,5,0, and 0,2,0 beats 0,1,9. If all three numbers are equal, the rule that appears later in the CSS wins.
For :is(), :not() and :has() the score is that of the most specific selector in the list, so :is(#a, .b) counts as an id. :where() always counts as zero. The pseudo-class :nth-child(2n+1 of .x) counts as one class plus the score of the selector after "of".
They work outside it. A declaration marked !important beats normal declarations, and styles in the style attribute beat selectors without !important. Specificity then decides between rules at the same level.
In nested CSS the & stands for the parent selector, so its score depends on the rule it sits in and cannot be known from the nested selector alone. This calculator counts & as zero and flags it in the breakdown, so add the parent's score yourself.
Related: CSS layout generator, CSS shadow generator, Color contrast checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.