CSS Specificity Calculator

How to use

1. 1Paste a single selector or a comma-separated list into the input box. Try a sample like '#header .nav a:hover' or ':is(h1, h2, h3) .title' to see the breakdown.
2. 2Read the (a, b, c) score on each selector card, where a counts IDs, b counts classes, attributes, and pseudo-classes, and c counts type selectors and pseudo-elements.
3. 3Open the token breakdown to see which exact part of the selector contributes each point, with color-coded badges for the three buckets.
4. 4When you enter two or more selectors, the ranking panel highlights which one wins. Tied selectors fall through to source order, which the panel notes.
5. 5Use the Copy button next to any score to grab the (a, b, c) value, or click Clear to reset the input and try another selector.

About this tool

CSS Specificity Calculator parses any CSS selector or comma-separated selector list and reports the (a, b, c) specificity triple defined by CSS Selectors Level 4. The a value counts ID selectors (#header), b counts class selectors (.nav), attribute selectors ([type='email']), and pseudo-classes (:hover, :focus-visible, :nth-child), and c counts type selectors (div, p, h1) and pseudo-elements (::before, ::placeholder, ::first-line). The universal selector (*) and the descendant, child (>), adjacent sibling (+), general sibling (~), and column (||) combinators correctly contribute zero. Functional pseudo-classes follow the modern spec rules: :is(), :has(), and :not() take the highest specificity of any selector inside their parentheses, :where() always counts as zero so you can use it as a low-specificity wrapper, and :nth-child() and friends add 1 to b plus the highest specificity of any selector after the of keyword. Each selector card shows a per-token breakdown so you can see which exact part of the selector contributes which point, with color-coded badges for IDs, classes/attributes/pseudo-classes, and types/pseudo-elements. When you paste more than one selector the tool ranks them and highlights the winner, with an explicit note when two selectors tie (in which case the cascade falls through to source order). Common use cases include debugging why a CSS rule does not apply, comparing a refactor before and after, choosing between :is() and :where() to control specificity, understanding why utility classes lose to a more specific component selector, and teaching the cascade to junior developers without making them memorize rules. Parsing happens entirely in your browser so the selectors and stylesheets you analyze never leave your device.

Free to use. Works in your browser. No signup, no login.