CSS Specificity Calculator
Calculate the specificity of CSS selectors as (a, b, c), including :is(), :not(), :has() and :where(), and sort them from strongest to weakest.
Free · No sign-up · Your inputs stay in your browser
Input
Calculate CSS selector specificity
Output
Strongest first
| Selector | Specificity (a, b, c) |
|---|---|
| #nav .menu a:hover | (1, 2, 1) |
| .btn:not(.disabled, #legacy) | (1, 1, 0) |
| :is(#main, .content) p | (1, 0, 1) |
| body .article > p:first-child | (0, 2, 2) |
| .btn.btn-primary | (0, 2, 0) |
| a[href^="https"]::after | (0, 1, 2) |
| ul li a | (0, 0, 3) |
| :where(.card) h2 | (0, 0, 1) |
Specificity is compared column by column (IDs, then classes, attributes and pseudo-classes, then elements and pseudo-elements), never added up: one ID beats any number of classes. :is(), :not() and :has() take their most specific argument, :where() always counts zero, and the universal selector and combinators count nothing. Equal specificity means the later rule wins; !important and cascade layers sit above all of this.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
Compared column by column
Specificity is not a single number: one ID beats any number of classes, and one class beats any number of elements. Two selectors with equal specificity are decided by order, the later one winning. The rules are in Selectors Level 4.
Keeping specificity low
Specificity fights end in !important. Single-class selectors, :where() to zero out a library's defaults and cascade layers (@layer), which take precedence over specificity, keep styles overridable.