CSS Specificity Calculator turns a selector string into classic (a,b,c) scores: IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements. Use it to understand why one rule wins.
What CSS Specificity Calculator does
Scores selectors and explains parts.
- ID count (a)
- Class/attribute/pseudo-class count (b)
- Type/pseudo-element count (c)
- Short explanation
Who CSS Specificity Calculator is for
- Frontend developers
- Students learning cascade
- Design system engineers
- Anyone debugging override wars
How to use CSS Specificity Calculator
1. Paste a selector.
2. Click Calculate or edit live.
3. Read a,b,c and the explanation.
4. Adjust the selector and compare.
Features
- Heuristic tokenizer
- Related CSS design tools
- Local only
- Clear scope limits
Examples
- #nav .item a => (1,1,1)
- button.primary:hover => (0,2,1)
- Compare .btn vs button.btn.primary
Tips and limits
- :not() arguments contribute; the :not itself does not in classic counting used here approximately.
- Inline styles and !important are not represented in selector-only scores.
- Complex modern selectors may need manual review.
- Universal selector * adds 0.
Related tools
FAQ
What do a,b,c mean?
a = IDs, b = classes/attributes/pseudo-classes, c = elements/pseudo-elements.
Does it include !important?
No. !important is separate from specificity tuples.
Extra notes
CSS Specificity Calculator runs entirely in your browser so drafts and secrets never need to leave your device for processing. Keep a backup of long outputs in your own notes if you rely on them for production servers or live events. Accessibility friendly labels come from the module UI strings, and the layout follows the shared BeeForge .bf-tool shell for consistent spacing and buttons.
Support for developers, marketers, and everyday users is the same client-side model: open the page, configure options, copy or download, then paste into your workflow. BeeForge related links on the tool page point to companion utilities so you can move between related generators without hunting the hub.
When you share results with a teammate, paste into a ticket or gist rather than screenshotting alone, so the text remains searchable. If a browser privacy mode blocks clipboard helpers, select the output manually. Local processing also means the tool works offline after the page and scripts have loaded once.
Validate generated configs or hashes in a staging environment before production use. Prefer regenerating secrets after any accidental paste into chat. For teaching sessions, walk through one sample input end to end so students see how live updates and copy buttons behave together.