Example
Input: #nav .link
Result: 0-1-1-0
What is CSS Specificity Calculator?
Calculates the specificity score (A-B-C-D) of a CSS selector.
How it Works
1. Count IDs (A). 2. Count Classes/Attributes (B). 3. Count Elements (C).
FAQ
What is !important?
It overrides all specificity rules. Use sparingly.
Inline styles?
Highest specificity (1-0-0-0) besides !important.
ID vs Class?
One ID (1-0-0) beats infinite classes (0-255-0).
Universal selector *?
Zero specificity (0-0-0).
Best practice?
BEM methodology keeps specificity flat.
Conclusion
Specificity wars make CSS hard to maintain. Keep specificity low (use classes over IDs) to ensure your styles are easy to override when necessary without using !important.