CSS Specificity Calculator

CSS Specificity Calculator

When two CSS rules target the same element and set the same property, the browser has to pick a winner. That decision is made by specificity — a score computed from the kinds of selectors used, not the order they're written in a stylesheet (order only matters as the final tie-breaker). This calculator takes one or more CSS selectors and works out each one's specificity, so you can see at a glance which rule will actually apply.

How specificity is calculated

Specificity is a triple of three counts, usually written (a, b, c):

$$specificity = (a, b, c)$$

• a — the number of ID selectors (#header)
• b — the number of class selectors, attribute selectors, and pseudo-classes (.button, [type="text"], :hover, :nth-child(2))
• c — the number of type (element) selectors and pseudo-elements (div, a, ::before)

Selectors are compared column by column, left to right: a selector with a higher a always wins, regardless of b or c; only when a is tied does b decide; only when both a and b are tied does c decide. Specificity is not decimal — (0, 1, 0) beats (0, 0, 99) no matter how many element selectors are on the other side, because comparison never carries across columns.

A few selectors are special cases:

• The universal selector (*) and combinators ( , >, +, ~) add nothing to any column.
• :where(...) always contributes (0, 0, 0), no matter what's inside it — it exists specifically to add selector logic without adding specificity.
• :is(...), :not(...), and :has(...) contribute the specificity of their single most specific argument (not the sum of all of them).
• Inline style="..." attributes and !important declarations override normal specificity entirely; this calculator only compares selectors written in a stylesheet.

Worked example

Compare #nav .item:hover against header nav ul li a:

• #nav .item:hover → 1 ID (#nav), 2 classes/pseudo-classes (.item, :hover), 0 elements → (1, 2, 0)
• header nav ul li a → 0 IDs, 0 classes, 5 elements (header, nav, ul, li, a) → (0, 0, 5)

Even though the second selector has five element names chained together, the first selector wins outright — a single ID selector outranks any number of type selectors.

How to use this calculator

1. Paste one or more CSS selectors into the text box, one per line (or comma-separated, just like in a real stylesheet).
2. Click Calculate to see a table with each selector's ID / class / element counts, its specificity, and which selector wins overall.
3. Use it to debug "why isn't my CSS rule applying?" problems, to decide how specific a new rule needs to be to override an existing one, or to review a stylesheet for overly specific selectors that are hard to override later.