How to Calculate and Compare CSS Specificity
Use the CSS Specificity Calculator to find and compare selector weights so you can debug cascade conflicts.
Tool Used
CSS Specificity Calculator
Enter your selectors
Type your CSS selectors into the textarea, one per line. You can mix any valid selector types: class chains, IDs, attribute selectors, pseudo-classes, and pseudo-elements.
Read the [a, b, c] breakdown
Each selector shows its specificity as [a, b, c]: a counts IDs, b counts classes, attributes, and pseudo-classes, and c counts element types and pseudo-elements.
Compare numeric scores
The total score (a×100 + b×10 + c) appears next to each selector. A higher score wins the cascade — this makes it easy to see at a glance which rule will apply.
Sort by specificity
Click Sort to reorder the list from highest to lowest specificity, helping you quickly identify which selectors are the most powerful in your stylesheet.
Rewrite conflicting selectors
If the highlighted winner is not the selector you want to take precedence, rewrite it to add or remove specificity — for example, replace an ID with a class to lower its weight.
All done!
You are ready to use CSS Specificity Calculator like a pro.