CSS Specificity Calculator
Paste any selector and see exactly how it scores — IDs, classes/attributes/pseudo-classes, elements/pseudo-elements — with each counted part listed. The definitive answer to "why is my rule losing?"
Settings
The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
Related generators & tools
- CSS Validator & Syntax CheckerValidators & Checkers
- CSS Diff CheckerCode Quality
- CSS Property SorterCode Quality
- CSS Minifier & FormatterDeveloper Tools
- CSS Hover Effects GeneratorAnimation & Motion
How it works
The calculator tokenizes your selector: #id → ID column; classes, [attributes] and :pseudo-classes → middle column; element names and ::pseudo-elements → last column. Comparison is column by column, left to right — one ID outranks any number of classes.
Modern wrinkles handled: :where() contributes zero (its contents are ignored), while :not() and :is() pass their arguments' weight through. The universal * and combinators count nothing.
Run the code — try it yourself
Predict which rule colors the link — then verify your prediction with the calculator (score both selectors).
Frequently asked questions
Two selectors tie — who wins?
Source order: the rule that appears later in the cascade applies.
Where does !important fit?
Outside this scoring entirely — it jumps the queue, which is exactly why it's a last resort.
Does inline style have a score?
It outranks any selector (think of it as a fourth, highest column); only !important beats it.
Keep going
Specificity fights end when you can read the scores. The architecture that avoids them — flat, class-based, BEM-named — is in the CSS Specificity & Architecture lesson.
CSSmatic is a non-profit project, made by developers for developers.