Developer
Free
No signup
CSS Specificity Calculator
Calculate and compare CSS selector specificity (A, B, C).
Loading tool…
About this tool
Paste any CSS selector and instantly see its specificity score broken down into (A, B, C): A for ID selectors, B for classes/attributes/pseudo-classes, and C for type selectors/pseudo-elements. Compare two selectors to determine which one wins. Each part of the selector is highlighted and labeled so you understand exactly why a rule takes precedence. Includes common selector examples for quick reference.
How to use
- 1 Type or paste a CSS selector into the input field.
- 2 See the (A, B, C) specificity score and a color-coded breakdown instantly.
- 3 Use the Compare mode to enter two selectors and find which one wins.
- 4 Review the selector breakdown to understand each contributing part.
- 5 Browse the examples section for common selectors and their specificity values.
Frequently Asked Questions
Related tools
Regex Tester & Debugger
Test regular expressions with real-time match highlighting, capture groups, and replace mode.
CSS Gradient Generator
Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.
Code Beautifier / Formatter
Format and beautify code across multiple languages with configurable indentation.