Web Tools
CSS Specificity Calculator
Compare CSS selector specificity scores.
Specificity results
Scores use the common inline, ID, class, element format. Higher values win from left to right before source order matters.
main#app .card[data-state=open]:hover::before with score 0,1,3,2.| Selector | Score | IDs | Classes | Elements | Copy |
|---|---|---|---|---|---|
main#app .card[data-state=open]:hover::before | 0,1,3,2 | 1 | 3 | 2 | |
:where(.theme) button.primary
| 0,0,1,1 | 0 | 1 | 1 |
This tool estimates selector specificity locally and does not execute CSS or inspect a page. When specificity ties, normal cascade order, layers, importance, inheritance, and source order can still decide the final style.
About This Tool
CSS specificity explains why one rule wins over another when multiple selectors match the same element. This calculator breaks a selector into the common inline, ID, class, and element score so you can compare selectors before changing a stylesheet. It is useful when debugging styles, reducing overly strong selectors, reviewing component CSS, or teaching how the cascade works without needing to open browser developer tools.
How To Use It
- Paste one CSS selector or a comma-separated selector list.
- Review each specificity score in inline, ID, class, element order.
- Compare selectors from left to right: IDs beat classes, classes beat elements, and later source order matters only after a tie.
- Use the notes for modern functional pseudo-classes such as :is(), :not(), :has(), and :where().
Examples
Class versus ID
.button has specificity 0,0,1,0, while #button has 0,1,0,0. The ID selector wins even if it has fewer total parts.
Attribute and pseudo-class selectors
button[data-state=open]:hover counts one element plus two class-column selectors, so its score is 0,0,2,1.
Modern selector helpers
:where(.card #title) contributes zero specificity, while :is(.card, #title) contributes the strongest argument, which is the ID selector.
Useful Notes
How the score is counted
The displayed score is inline styles, IDs, classes/attributes/pseudo-classes, then elements/pseudo-elements. Inline styles are shown as the first column for comparison, but pasted selectors normally start with zero in that position.
Cascade still matters
Specificity is not the whole cascade. !important, cascade layers, origin, inheritance, and source order can still change which declaration applies when selectors match the same element.
Local and private
Selectors are analyzed in your browser. The tool does not fetch websites, inspect DOM nodes, execute CSS, or send selector text to a server.
Parsing scope
The calculator handles common selectors and modern :is(), :not(), :has(), and :where() behavior. For unusual vendor-specific syntax, verify important production decisions in browser developer tools as well.
FAQ
What does a CSS specificity score like 0,1,2,1 mean?
It means zero inline styles, one ID selector, two class-column selectors such as classes or attributes, and one element-column selector. Comparison happens from left to right.
Does a bigger total number always win?
No. Specificity is lexicographic. One ID beats many classes because the ID column is compared before the class column.
Why does :where() add no specificity?
CSS defines :where() as zero specificity so authors can write helpful structural selectors without making them harder to override.
Can this tell me which CSS rule wins on a real page?
It helps compare selector weight, but a real page can also depend on cascade layers, !important, stylesheet order, inheritance, and whether each selector actually matches the element.
Related Tools
Color Contrast Checker
Check WCAG text contrast ratios for two web colors.
CSS Clamp Calculator
Build fluid CSS clamp() values from size and viewport endpoints.
CSS Unit Converter
Convert relative CSS units with the context that determines their real size.
CSS Box Shadow Generator
Build layered CSS box shadows with a live preview.