CSS Specificity Calculator
Enter a CSS selector and get its ID, class and element counts plus a total specificity score.
Enter your details below.
How to use
- Enter a CSS selector.
- Click Calculate specificity.
- Compare the score with competing selectors: the higher score wins.
About this tool
Specificity decides which CSS rule wins when two rules target the same element. Paste a selector and this tool counts its IDs, its classes plus attributes plus pseudo-classes, and its elements plus pseudo-elements, then combines them into a score. The result is a practical approximation for common selectors, which is enough to settle most why-is-my-style-ignored questions.
Frequently asked questions
Why is an ID worth 100 and a class worth 10?
Specificity is usually written as three groups, and the score here turns those groups into one number for easy comparison: IDs times 100, plus the middle group times 10, plus the element group.
Is this score exact for every selector?
No. It is a practical approximation for common selectors. Unusual cases like :not() contents and nested rules can behave differently, so treat edge cases as estimates.