Frontend Engineering Tools
CSS Specificity Calculator
Enter a CSS selector to compute its specificity value and understand the cascade order.
No data is transmitted — everything runs locallyTool
Example — Representative selector with one ID, one class/pseudo component, and descendant structure.
Specificity
(0,1,1,0)
inline,ID,class,element
ID selectors
1
highest weight
Class/attr/pseudo
1
medium weight
Elements
0
lowest weight
About this tool
CSS Specificity Calculator
The CSS Specificity Calculator computes the (inline, ID, class/attribute/pseudo-class, element) specificity tuple for any CSS selector.
• Debug a CSS rule that isn't applying due to lower specificity
• Understand why an ID selector overrides multiple class selectors
• Check specificity before adding a class to override an existing rule
• Explain specificity to a junior developer during a code review
Affiliate disclosure
Developer-friendly cloud infrastructure. DigitalOcean provides cloud compute, networking, and managed databases with predictable pricing.
View DigitalOcean options
External site · Independent provider · We may receive a commission · Not a recommendation
FAQ
What does this tool tell you?
The CSS Specificity Calculator computes the (inline, ID, class/attribute/pseudo-class, element) specificity tuple for any CSS selector.
What affects the result most?
Specificity: (inline, ID, class/attr/pseudo-class, element/pseudo-element) — 4-number tuple. Inline styles: (1,0,0,0) — always wins over stylesheet rules except !important. ID selector: (0,1,0,0) per ID — #main is more specific than any class selector.
How should I use the result?
The calculation is deterministic — the same inputs always produce the same output — so the most useful workflow is to vary one input at a time and see which factor moves the result most. That tells you where to focus your attention before committing to a decision.