Paste competing CSS rules and see which selector wins and by how much
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 17 Oct 2026.When a style will not apply, another rule usually has a higher specificity. Paste the competing rules, as whole CSS or one selector per line, and each gets its (A, B, C) score; the winner is marked, and on a tie the rule written last wins, as in the browser. A single ID outweighs any number of classes, so (1, 0, 0) beats (0, 12, 0).
Paste or type your input.
Choose the options you need.
Press Ctrl+Enter, then copy or download.
When two rules set the same property on the same element, the browser applies the one with the higher specificity. Paste your selectors, one per line or as whole CSS rules, and each gets its score with every part coloured by the column it adds to.
Comparing. A is compared first, then B, then C. Ten classes, (0, 10, 0), still lose to one ID, (1, 0, 0). When the scores are equal, the rule written later wins; the winner is marked on that basis. Inline styles and !important sit above specificity altogether and are not part of the score.
Checked against browsers' own tests. The counting is tested on the specification's 14 worked examples, the has-, is- and not-specificity test pages that every browser runs from web-platform-tests, and 360 selectors generated as syntax trees whose scores were summed separately. The nesting selector & takes its parent's score and is flagged rather than guessed. Nothing you paste leaves the browser.
The rest of the article, and all 6 questions about CSS Specificity Calculator, are on the CSS Specificity Calculator page.
Count three things in the selector: IDs give A, classes, attribute selectors and pseudo-classes give B, and type selectors and pseudo-elements give C. The universal selector and combinators count nothing. So ul#nav li.active a scores (1, 1, 3): one ID, one class and three element names.
A selector with :is() gets the score of the most specific selector in its list, whichever one matched, so :is(.a, #b) counts as an ID. :where() always scores zero, whatever it contains. :not() and :has() follow the :is() rule, taking their most specific argument.
Usually another rule targeting the same element has a higher specificity, or the same specificity and appears later in the stylesheet. Paste both selectors here to see the scores. Other causes are !important on the other rule, an inline style attribute, a cascade layer, or a selector that does not match at all.
Neither is part of the (A, B, C) score. A style attribute beats every selector in a stylesheet, and an !important declaration beats normal declarations whatever their specificity. Between two !important declarations, or two normal ones, the selector specificity shown here decides, then the order in the source.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Specificity Calculator and anybody who knows can answer. No account needed.
Same job, other tools: Link Preview Checker – Find the missing tag behind a WhatsApp or Slack link with no picture · HTTP 404 Not Found – What a 404 means, when to send it, and when 410 or 403 is the better answer.
On the related tools: Readability Checker – Flesch reading ease and grade level, with what to change.