Developer · CSS
CSS specificity calculator.
Paste one selector or a whole stylesheet's worth. Get the (A,B,C) specificity of each, ranked so the winner is first, and see which ties are settled by source order. Runs in your browser; nothing is sent anywhere.
Input
Result
Enter one or more selectors and press Calculate.
How CSS specificity is calculated
Specificity is three counts written (A,B,C). This page follows section 15 of the W3C Selectors Level 4 specification.
A counts ID selectors (#nav). B counts class selectors (.card), attribute selectors ([href]) and pseudo-classes (:hover). C counts type selectors (a, li) and pseudo-elements (::before). The universal selector * and combinators (>, +, ~, and the descendant space) count nothing. Repeating a simple selector counts again, so .a.a.a is (0,3,0).
Comparing: the larger A wins. If A ties, the larger B wins. If B ties too, the larger C wins. The counts are compared in order, never added together, so one ID (1,0,0) beats any number of classes.
Functional pseudo-classes: :is(), :not() and :has() are replaced by the specificity of the most specific selector in their argument list, so :is(em, #foo) is (1,0,0). :where() is always zero. :nth-child() and :nth-last-child() count as one pseudo-class plus the most specific selector in an optional of S list, so :nth-child(even of li, .item) is (0,2,0) while :nth-child(2n+1) is (0,1,0).
Legacy pseudo-elements: :before, :after, :first-line and :first-letter may be written with one colon and are still pseudo-elements, so they count in C.
Ties and source order: when two rules that match the same element have equal specificity, the one that comes later in the source wins. That comes from the CSS cascade rather than from selector specificity itself. The ranking treats each line as a rule in the order you typed it.
Sources: W3C Selectors Level 4, section 15: Calculating a selector's specificity (its worked examples are used as tests for this page), and the grammar section of the same document for the single-colon legacy pseudo-elements.
Frequently asked questions
Does !important or an inline style change the numbers?
Not here. Inline style="" attributes and !important are handled by the cascade before selector specificity is compared, so they are outside this calculation.
What about the nesting selector &?
In nested CSS, & takes the specificity of the parent rule, which this page cannot know from one selector alone. It is counted as zero and a warning is shown.
Why does a selector list give separate results?
In a selector list each selector has its own specificity, and the one that matches the element is the one used. So a, #b is two entries: (0,0,1) and (1,0,0).
Are the arguments of :host() and ::slotted() counted?
Only the pseudo-class or pseudo-element itself is counted. Those two also add their argument's specificity under a different specification (CSS Scoping), so a warning is shown when you use them.
Selector text only
This tool computes specificity from the selector text. It does not load your page, check which elements match, or account for cascade layers, origin, !important or inline styles. A selector that fails to parse is listed as an error rather than given a number. Nothing you type is stored or sent anywhere.