CSS Specificity Explained: The Complete Guide

1. What Is CSS Specificity?

Specificity is the algorithm browsers use to decide which CSS declaration applies when multiple rules target the same element and set the same property. It is calculated as a tuple of three numbers: (a, b, c) where a counts ID selectors, b counts class-level selectors, and c counts element-level selectors.

The rule with the highest specificity wins. If two rules have equal specificity, the one that appears later in the source wins. This is the cascade in Cascading Style Sheets.

2. How to Calculate Specificity

Count the selectors in each category. IDs (#header) add (1,0,0). Classes (.active), attributes ([type=text]), and pseudo-classes (:hover, :nth-child) add (0,1,0). Elements (div, p) and pseudo-elements (::before, ::after) add (0,0,1).

The key insight: specificity is compared left to right. One ID (1,0,0) beats any number of classes (0,99,0). One class (0,1,0) beats any number of elements (0,0,99). This is why ID selectors are so powerful — and why overusing them makes CSS hard to override.

3. Modern CSS: :where(), :is(), and :has()

:where() — Zero specificity

:where() always has zero specificity regardless of its arguments. This makes it perfect for writing defaults that are easy to override. :where(.card) .title has the same specificity as just .title.

:is() — Takes highest argument specificity

:is() takes the specificity of its most specific argument. :is(#header, .nav) has ID-level specificity because #header is the most specific argument, even if the matched element uses .nav.

:has() — The parent selector

:has() works like :is() for specificity — it takes the specificity of its argument. div:has(.active) adds one element and one class to the count.

4. Cascade Layers (@layer)

CSS Cascade Layers, introduced with @layer, create a new priority system above specificity. Rules in later layers override earlier layers regardless of specificity. Within the same layer, normal specificity rules apply. This is a game-changer for managing large stylesheets and third-party CSS.

5. Specificity Best Practices

• Keep specificity low: Use classes instead of IDs. Avoid nesting more than 2-3 levels deep.
• Use BEM or similar methodology: Flat class names like .card__title avoid specificity wars.
• Avoid !important: It creates a parallel specificity system that is hard to debug and override.
• Use :where() for resets and defaults: Zero-specificity rules are easy to override in component styles.
• Use @layer for third-party CSS: Put vendor styles in an early layer so your styles always win.