CSS Specificity Calculator (a,b,c) Online
Calculate a CSS selector’s specificity (a,b,c) to understand which rule wins, in your browser.
Specificity: (1,2,3). The larger the tuple (compared left to right), the more the rule wins. Inline styles count as (1,0,0,0) and !important overrides all.
🔒 100% client-side — no data sent
Calculate the specificity of any CSS selector and get the (a,b,c) triplet instantly. Perfect for understanding why one rule overrides another and debugging your style conflicts. 100% in your browser, no data sent to any server.
What is it for?
- ▸ Understand why a CSS style is not applied despite your rule
- ▸ Compare two selectors to know which one wins
- ▸ Avoid overusing !important by adjusting your selectors
- ▸ Teach or review CSS specificity rules
FAQ
How do you calculate CSS selector specificity?
You count three categories: (a) #id selectors, (b) classes, attributes and pseudo-classes, (c) elements and pseudo-elements. Paste your selector into the tool and the (a,b,c) triplet is displayed automatically.
Which CSS selector has the highest priority?
An inline style beats an ID, which beats a class, which beats an element. With equal specificity, the last declared rule wins, except when !important is used.
Does !important count toward specificity?
No, !important is not part of the (a,b,c) calculation: it overrides the normal cascade at a higher level. Two !important rules are then decided by their respective specificity.