CSS Specificity Calculator
One selector per line. Specificity is the (ID, class, type) triple from Selectors Level 4 — :is(), :not() and :has() take their most specific argument, and :where() counts as zero.
| Selector | Specificity | Wins |
|---|---|---|
| #app .card > p | 1, 1, 1 | ✓ |
| .card .title:hover | 0, 3, 0 | |
| nav ul li a | 0, 0, 4 | |
| a[href^="https"]:not(.external) | 0, 2, 1 | |
| :where(.theme-dark) .card | 0, 1, 0 | |
| :is(h1, #title) span | 1, 0, 1 | |
| div::before | 0, 0, 2 | |
| .btn.btn-primary.btn-lg | 0, 3, 0 |
A tie is broken by source order — the rule declared last wins. Inline style attributes beat every selector, and !important beats everything except another !important.
CSS Specificity Calculator — Free Online Tool
Calculates CSS selector specificity as the (ID, class, type) triple defined by the Selectors Level 4 specification, counting IDs, classes, attribute selectors and pseudo-classes, elements and pseudo-elements, handling :is(), :not() and :has() by taking their most specific argument and :where() as zero, and ranking several selectors so you can see which rule wins.
How to use the CSS Specificity Calculator
- Open the tool above — it runs entirely in your browser, so your input never leaves this page.
- Paste or type your input into the field, then press the relevant button (e.g. Encode / Decode, Generate, or Convert).
- Copy the result from the output area with the copy button orCtrl/Cmd + C.
- No signup, no upload, and no tracking — repeat as often as you need.
Frequently asked questions
What do the three numbers mean?
They are the specificity triple from Selectors Level 4: IDs, then classes (including attribute selectors and pseudo-classes), then type selectors and pseudo-elements. They are compared left to right, and a higher column always beats any total in a lower one — 1,0,0 beats 0,99,99.
How do :is(), :not(), :has() and :where() count?
:is(), :not() and :has() take the specificity of their most specific argument, so :is(h1, #title) counts as an ID. :where() always contributes zero, which is precisely why it exists for low-priority defaults in libraries.
Two selectors have the same specificity — which one applies?
The one declared later in the cascade. Inline style attributes outrank every selector, and !important outranks everything except another !important on a higher-priority origin.
Free & private — why use this CSS Specificity Calculator
The CSS Specificity Calculator runs 100% client-side in your browser. Your data is never uploaded to a server, no account is required, and the tool is completely free. It works offline once the page has loaded and is part of a growing collection of privacy-first developer utilities.