CSS Specificity Calculator
Instantly calculate the specificity (A,B,C) of any CSS selector. Compare two selectors and find out which rule wins.
Quick Examples
Results update live as you type
Specificity Reference
| Selector / Rule | Score |
|---|---|
| !important | Overrides all |
| Inline style | 1,0,0,0 |
| #id | 0,1,0,0 |
| .class / [attr] / :hover | 0,0,1,0 |
| div / ::before | 0,0,0,1 |
| * (universal) | 0,0,0,0 |
About the CSS Specificity Calculator
CSS specificity is a weight applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.
The specificity is represented as a three-number score: (A, B, C). A = ID selectors, B = class selectors, attribute selectors, and pseudo-classes, C = type selectors and pseudo-elements. A higher A value always beats any B or C value, no matter how large they are.
Use the Single Selector mode to instantly see the score for any selector as you type. Switch to Compare Two mode to paste in two competing selectors and find out which one wins in the cascade.
All calculations happen entirely in your browser — no data is sent to any server.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is CSS Specificity Calculator really free?
Yes. CSS Specificity Calculator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does CSS Specificity Calculator upload my data?
No. CSS Specificity Calculator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and CSS Specificity Calculator is ready to use on desktop or mobile.
Does CSS Specificity Calculator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More developer tools
Folder Structure Generator
Build folder structure diagrams, ASCII directory trees, and file tree visualizations for READMEs and docs.
.gitignore Generator
Generate merged .gitignore rules for your stack with one click.
JSON to TypeScript Interface
Convert JSON into TypeScript interfaces with inferred nested types.
Text to Slug Converter
Convert titles and phrases into clean SEO-friendly URL slugs.
UTM Builder
Build campaign URLs with UTM parameters for analytics tracking.
JSON Formatter & Validator
Validate, format, and minify JSON directly in your browser.