CSS Specificity Calculator
Calculate selector specificity.
About this tool
Compute classic (a,b,c) specificity so you can see why one rule wins over another without opening DevTools every time.
How to use
Paste a selector, run Calculate, read IDs vs classes vs elements. Lower specificity usually means easier overrides later.
Example
Example mixes elements and classes — typical of legacy nav CSS.
Input
nav.site-header .menu a.activeOutput
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2Tip
If you need !important often, specificity debt is the real bug.
Good to know
How is specificity calculated?
It counts three groups: IDs, then classes, attributes, and pseudo-classes, then elements and pseudo-elements. The result is shown as (a,b,c) and compared left to right.
Does !important or an inline style show up here?
No. Those sit outside the selector, so they are not part of the (a,b,c) score. An inline style or !important beats any selector specificity.