CSS Specificity Calculator
Specificity decides which CSS rule wins when several target the same element. It is scored in three parts: ID selectors, then classes, attributes and pseudo-classes, then element and pseudo-element selectors. The higher score wins, compared left to right.
Free, no signupRuns entirely in your browser
Input
Result
- Selector
- div.container ul li.active:hover
- Specificity Score
- (0, 3, 3)
- ID Selectors (A)
- 0
- Classes, Attributes & Pseudo-classes (B)
- 3
- Elements & Pseudo-elements (C)
- 3
- Explanation
- An ID selector counts as 100 points, a Class/Attr/Pseudo-class counts as 10 points, and an Element/Pseudo-element counts as 1 point. Total score weight = 33 points.
About
What the CSS Specificity Calculator does
The crucial and unintuitive part is that the categories do not trade off. A single ID beats any number of classes — 1,0,0 outranks 0,10,0 — because comparison is column by column, not by total. Understanding this is usually what turns 'why won't this style apply' into an obvious answer.
How it works
Using the CSS Specificity Calculator
- 1Enter your CSS selector.
- 2ID selectors are counted into the first column.
- 3Classes, attribute selectors and pseudo-classes go into the second.
- 4Element types and pseudo-elements go into the third.
- 5The three-part score is shown so you can compare selectors.
Use cases
What people use it for
- Working out why a style is being ignored
- Comparing two competing selectors
- Refactoring an over-specific stylesheet
- Teaching the cascade
FAQ
Frequently asked questions
6 related
All tools →