Enter any CSS selector and instantly see its specificity score — the (a,b,c) breakdown that determines which rule wins in a style conflict.
| Selector Type | Score Impact | Examples |
|---|---|---|
| Inline style | a+1 (1,0,0) | style="color:red" |
| #id selector | a+1 (0,1,0) | #header, #nav |
| .class selector | b+1 (0,0,1) | .btn, .active |
| Attribute selector | b+1 (0,0,1) | [type="text"], [href] |
| Pseudo-class | b+1 (0,0,1) | :hover, :focus, :nth-child(2) |
| Element type | c+1 (0,0,0,1)* | div, p, a, span |
| Pseudo-element | c+1 (0,0,0,1)* | ::before, ::after, ::placeholder |
| Universal selector | 0 (no contribution) | * |
| Combinator | 0 (no contribution) | >, +, ~, (space) |
| !important | Overrides cascade | color: red !important |
* The classic (a,b,c) notation groups elements+pseudo-elements as the third component. The extended notation uses (a,b,c,d) where d = elements/pseudo-elements.
Not sure why one CSS rule is overriding another? CSS specificity determines which styles win when two selectors target the same element. Paste any selector into the CSS Specificity Calculator and get the exact (a,b,c) score in seconds — no browser dev tools required. It's free, instant, and works right in your browser.
How to Calculate CSS Specificity
- Enter a CSS selector in the input field — for example
#nav .menu li a:hoverorbutton.btn[type="submit"]. - Click "Calculate" (or press Enter) to instantly compute the specificity score.
- Read the (a,b,c) breakdown — the tool shows ID count (a), class/attribute/pseudo-class count (b), and element/pseudo-element count (c) separately.
- Compare multiple selectors by adding more rows — useful when debugging which rule wins a style conflict.
- Copy or clear results when you're done.
Why Use Flipper File to Calculate CSS Specificity?
- Instant results — specificity is computed as you type, no page reload needed.
- Full (a,b,c) breakdown — see each component scored separately so you know exactly why one rule overrides another.
- Multi-selector comparison — enter several selectors at once and rank them by specificity weight.
- Plain-English explanations — each result includes a human-readable label (e.g., "2 IDs, 1 class, 3 elements") so beginners and pros alike can follow along.
- Handles complex selectors — pseudo-classes (
:hover,:nth-child), attribute selectors ([type="text"]), pseudo-elements (::before), and combinators all parsed correctly. - No login, no install — open the page, paste your selector, done.
Frequently Asked Questions
What is CSS specificity?
CSS specificity is the algorithm browsers use to decide which CSS rule applies when two or more rules target the same element. Each selector is assigned a three-part score (a, b, c) — inline styles score (1,0,0), IDs score (0,1,0), classes/attributes/pseudo-classes score (0,0,1), and elements/pseudo-elements score (0,0,0,1) in the extended model. The rule with the highest score wins.
How is the (a,b,c) score calculated?
- a = number of ID selectors (
#id) - b = number of class selectors (
.class), attribute selectors ([attr]), and pseudo-classes (:hover,:focus) - c = number of element type selectors (
div,p,a) and pseudo-elements (::before,::after)
Specificity is compared left to right: a higher a value always beats a lower one regardless of b or c.
Does !important affect specificity?
!important overrides the normal specificity cascade entirely — it sits above even inline styles in terms of priority. Our calculator shows the natural specificity score without !important, since it should be avoided in production CSS anyway.
What about the universal selector (*)?
The universal selector * has zero specificity (0,0,0). It never contributes to any component of the score.
Why is my rule being overridden even though it has higher specificity?
If specificity is equal, the rule that appears later in the stylesheet wins (source order). Also check whether an !important declaration is involved. Use the comparison feature in this tool to line up your selectors and confirm their scores.
Does this tool handle pseudo-elements like ::before?
Yes. Pseudo-elements (::before, ::after, ::placeholder, etc.) count as one element (c=1). Pseudo-classes (:hover, :nth-child(2), :not()) count as one class (b=1).
What selectors does the tool not handle?
The :is(), :has(), :where(), and :not() pseudo-classes have special specificity rules in CSS Selectors Level 4 — :where() always contributes zero specificity while :is() and :has() take the specificity of their most specific argument. This tool handles these cases and notes them in the output.
Can I calculate specificity for an entire CSS rule block?
This tool is designed for individual selectors. If you paste a full rule like a.link { color: red; }, the tool will extract and score just the selector part (a.link), ignoring the declaration block.