CSS Specificity Calculator
Paste selectors or a whole stylesheet to get each selector's (ids, classes, types) specificity, ranked by which rule wins the cascade. :is(), :not(), :where() and :nth-child(of) are handled.
One selector per line, or paste a stylesheet. Each selector gets an (ids, classes, types) score and the list is ranked in the order the cascade would pick a winner. Nothing leaves your browser.
How each selector is scored
Specificity is three counts compared left to right: ids, then classes (with attributes and pseudo-classes), then types (with pseudo-elements). Every score below came from this page's calculator when the site was built, following Selectors Level 4, including the functional pseudo-classes most calculators get wrong.
| Selector | (ids, classes, types) | Why |
|---|---|---|
#nav .item a | (1, 1, 1) | One id, one class, one type: the three columns are counted separately and never carry over. |
.c .d .e | (0, 3, 0) | Three classes still lose to a single id. No number of classes outranks an id. |
a:hover | (0, 1, 1) | A pseudo-class counts like a class. |
ul li::before | (0, 0, 3) | A pseudo-element counts like a type selector. |
[type="text"] | (0, 1, 0) | An attribute selector counts like a class. |
:is(#a, .b) p | (1, 0, 1) | :is() takes the specificity of its most specific argument, here the id, even when the element matched through .b. |
:where(#a) p | (0, 0, 1) | :where() always counts zero, which is what makes it useful for overridable defaults. |
:not(.x, #y) | (1, 0, 0) | :not() also takes its most specific argument. |
li:nth-child(2 of .important) | (0, 2, 1) | With "of S", :nth-child adds the most specific selector in S to its own class-level weight. |
div > p + span ~ em | (0, 0, 4) | Combinators add nothing; only the four type selectors count. |
* | (0, 0, 0) | The universal selector counts zero. |
Two things specificity does not decide: an !important declaration beats any selector, and when two selectors tie, the one that comes later in the stylesheet wins.