How to Work Out CSS Specificity
Specificity decides which style wins when rules collide. This guide explains ID, class and element counts and how to read the score.
What is the CSS Specificity Calculator?
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.
How to use it
- Enter a CSS selector.
- Click Calculate specificity.
- Compare the score with competing selectors: the higher score wins.
Worked example
With the selector #main .nav li.active, the result is 1 ID, 2 in the classes group (.nav and .active), 1 in the elements group (li), and a specificity of (1, 2, 1) = 121.
Why is my style being ignored?
Usually a competing rule has higher specificity, or an equally specific rule comes later in the stylesheet. Compare scores first, then check order, before adding stronger selectors.
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.