CSS Specificity Explainer
Paste selectors and find out which one actually wins.
BeginnerWeb appDev tool6–12hAI-buildable 4/5no setupworth shipping
Calculate and compare CSS specificity across selectors, showing the breakdown and explaining why one beats another. Specificity is a rule almost everyone half-remembers; a tool that shows the arithmetic makes it stick.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Paste one or more selectors
- Specificity is calculated and shown as its component parts
- Selectors sort by which would win
- The winning selector is explained in words
- Pseudo-classes, attribute selectors and combinators are handled
- The effect of :is, :where and :not is shown correctly
- Inline styles and !important are explained in the ordering
The interesting part
- Parsing complex selectors correctly, including nested functional pseudo-classes
- :where contributing zero specificity while :is takes its argument's
- Explaining the result without just restating the numbers
Once it works
- Add cascade layer awareness
- Paste a whole stylesheet and find conflicting rules
- Add a suggestion for the smallest change that would win
Suggested stack
reacttypescripttailwind