Web

CSS Specificity Calculator

Debug cascade fights quickly. Paste selectors line by line and MonoTools ranks them by specificity score, with :where() treated as zero specificity.

selectors.css
highest specificity first
scoreselector
1-3-0#checkout .button.primary[data-state="open"]
0-3-1button:not([disabled]).danger
0-2-3.app header nav a:hover
0-1-3:where(main article) h2 + p::first-line
runtime

Browser-local execution

Inputs stay inside the current tab unless you copy, download or explicitly export.

memory

Session handoff

Magic Paste can pass input to a target tool through sessionStorage, never through the URL.

control

User-owned state

Favorites, recent tools and workflow history are local browser data you can clear from the browser.

smart handoff graph

Suggested next moves

session handoff ready
sponsor

Fixed native slots for developer products. No third-party tracking, no popups, no layout shift.

Sponsor this tool
01

How to use

  1. 01Paste one CSS selector per line.
  2. 02Read the specificity score in id-class-element format.
  3. 03Copy the ranked list for code review notes.
02

FAQ

What does 1-2-0 mean?
It means one ID selector, two class/attribute/pseudo-class selectors and zero element/pseudo-element selectors.
Does :where() count?
No. :where() is intentionally zero specificity in modern CSS, and this calculator follows that behavior.
03

Related tools