CSS Specificity Calculator
Score one or more CSS selectors and see which one wins the cascade.
| Selector | a (IDs) | b (cls/attr/pc) | c (type/pe) | Score |
|---|---|---|---|---|
| #nav .item a:hover | 1 | 2 | 1 | 1, 2, 1 ✓ |
| .btn.primary | 0 | 2 | 0 | 0, 2, 0 |
| ul li | 0 | 0 | 2 | 0, 0, 2 |
| :is(h1, .heading) | 0 | 1 | 0 | 0, 1, 0 |
| :where(.foo) | 0 | 0 | 0 | 0, 0, 0 |
| [type="text"] | 0 | 1 | 0 | 0, 1, 0 |
| nav > ul li.active a::before | 0 | 1 | 5 | 0, 1, 5 |
How specificity works
CSS specificity is a 3-tuple (a, b, c) compared left-to-right:
- a — ID selectors (
#id) - b — class, attribute, and pseudo-class selectors (
.cls,[attr],:hover) - c — type and pseudo-element selectors (
div,::before)
:not(X) and :is(X) take the maximum specificity of their arguments; :where(X) always contributes zero. *and combinators don't count. Inline styles beat selectors; !important beats everything except a later !important.
You might also like
- HTML & CSS Formatter / MinifierBeautify or minify HTML and CSS — pretty-print messy markup, or shrink it for production.
- Cache-Control Header BuilderBuild HTTP Cache-Control headers with presets for static assets, APIs, and private responses.
- Color Picker & Contrast CheckerPick colors, convert between HEX/RGB/HSL, and check WCAG contrast.
- HTTP Cookie Builder & ParserConstruct or decode Set-Cookie headers with SameSite, Secure, HttpOnly, and prefix validation.