CSS Specificity Comparator
Compare two CSS selectors side by side — see ID, class, and element scores with visual bars, and learn which rule wins when both apply.
About this tool
CSS specificity is the set of rules browsers use to decide which declaration wins when several selectors match the same element. Every selector resolves to a three-part score (IDs, classes, elements) compared left to right: an ID beats any number of classes, and a class beats any number of element (type) selectors.
Example: #nav .item a:hover scores (1, 2, 1) — one ID, two class-level parts (the class .item and the pseudo-class :hover), and one element (a). Paste two selectors into the tool to see which one wins when both apply.
Attribute selectors like [type="text"] and pseudo-classes like :not() count as classes. Pseudo-elements such as ::before do not add to the score. The universal selector * contributes nothing.
FAQ
Why does my class lose to an ID selector? ›
An ID selector is worth 100 in the classic point system, a class is worth 10, and an element is worth 1. One ID (#header) beats any number of classes, so .button.active.large still loses to #submit.
How does :not() affect specificity? ›
The :not() pseudo-class itself counts as one class, but the selector inside it does not add extra weight. So :not(.x) has the same specificity as a single class.
Can I analyze more than two selectors at once? ›
Yes — use the <a href="/tools/css-specificity/">CSS Specificity Analyzer</a> for batch analysis of multiple selectors. It ranks all selectors by specificity, shows the (a,b,c,d) tuple for each, and lets you export the results as a tab-separated table.
Does inline style beat everything? ›
Inline style attributes beat any selector in the stylesheet. Only !important declarations override inline styles, and !important overrides normal declarations regardless of specificity.