CSS Specificity Calculator - Understand Selector Weight

How to use this tool

1. Enter selector. Type a CSS selector like #header .nav > a:hover into the input.
2. Read the score. Read the modern (A,B,C) tuple alongside its legacy (a,b,c,d) mapping and inspect token contributions.
3. Compare selectors. Add multiple selectors (one per line) to the Compare tab to rank them.
4. Use examples. Click any example to load it and see how it is scored.

How CSS specificity works

CSS specificity helps decide which declaration wins when competing rules target the same element. It is one part of the cascade: origin, importance, cascade layers, and other cascade conditions can be considered before specificity. This calculator scores selectors only, so its inline-style weight stays at zero.

Selectors Level 4 expresses specificity as (A,B,C). This page also shows the legacy four-part form (a,b,c,d), where a is inline-style weight and is 0 for selector-only calculations. The remaining columns map directly: b = A for IDs, c = B for classes, attributes, and pseudo-classes, and d = C for types and pseudo-elements.

• A / b: ID selectors (#id)
• B / c: Class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover, :nth-child)
• C / d: Type selectors (div, p) and pseudo-elements (::before, ::after)

Within the relevant cascade origin, importance, and layer, specificity compares lexicographically: a larger value in an earlier column wins before later columns are considered. The universal selector (*) and combinators (>, +, ~) contribute zero.

Modern pseudo-class specificity

• :where(): Always 0. Useful for base styles you want easily overridden.
• :is(), :not(), and :has() use the specificity of their most specific argument.

Tips for managing specificity

• Prefer classes over IDs in CSS to keep specificity manageable.
• Avoid nesting selectors too deeply, as each level adds to specificity.
• Use :where() for reusable utilities that should never win a specificity battle.
• Reserve !important for truly exceptional cases like utility overrides.

!important

!important changes cascade priority; it is not a specificity value. For these same-origin declarations, an important declaration beats a normal declaration even when the normal selector has higher specificity. The complete cascade still considers origin and layer priority, so importance does not mean a declaration wins every possible cascade comparison. The interactive example above toggles importance to show how the winner changes.

.button {
  color: blue !important; /* Competes in the important-declaration cascade */
}

Why to use it sparingly: Important declarations have their own cascade ordering and can make later overrides harder to reason about. Prefer a clear layer and selector strategy when you control the stylesheet.

When it is useful: Utility classes that must override component styles, third-party styles you cannot control, or critical accessibility fixes.

Cascade layers (@layer)

CSS cascade layers let you define an order for groups of rules. Among normal declarations in different layers, the later layer has priority before specificity is compared. Among important declarations in different layers, the earlier layer has priority. Unlayered rules also have defined positions in the cascade, so a layer name such as utilities is not inherently highest priority. The control above demonstrates the normal-declaration rule with two layers and selectors of different specificity.

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer utilities {
  .hidden { display: none !important; }
}

For normal declarations, the last declared layer wins when declarations from different layers compete, even if its selector is less specific. Within one layer, specificity still matters. For important declarations, layer order reverses and the first layer has priority.

Specificity visualization

Compare these three selectors:

Winner: #header .nav a:hover because it has an ID (A=1, or legacy b=1). Even if .button had 100 classes, it would still lose because b=0.