CSS Specificity and the Cascade

Analogy categoryAnalogies

Introduction

When multiple CSS rules target the same element and property, the browser must decide which rule wins. This decision is governed by the cascade, which considers origin, specificity, and source order, plus the special override of !important.

🏏

Cricket analogy: When both the third umpire's replay and the on-field umpire's call apply to the same delivery, cricket has rules (DRS protocol) for which decision wins — similarly, CSS's cascade decides which of several conflicting rules governs an element.

Syntax

css

/* Specificity increases top to bottom */
p { color: black; }                 /* 0-0-1 */
.highlight { color: orange; }        /* 0-1-0 */
#note { color: green; }              /* 1-0-0 */
p.highlight#note { color: purple; }  /* 1-1-1 */
style="color: red;"                   /* inline: 1-0-0-0 */

Explanation

Specificity is calculated as a four-part value: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, often written as (inline, IDs, classes, elements). Higher-order categories always beat lower ones regardless of count — a single ID selector always outweighs any number of class selectors, and a single class always outweighs any number of type selectors. When two rules have identical specificity, the cascade falls back to source order, and the rule that appears later in the stylesheet (or is loaded later) wins. The !important flag overrides normal specificity for that declaration, though it should be used sparingly since it makes styles harder to override later.

🏏

Cricket analogy: Specificity is scored in tiers like batting categories — a single century (ID selector) always outranks any number of fifties (class selectors), and !important is like a match referee's override that voids the batting order entirely.

Example

css

/* HTML: <p id="note" class="highlight">Hello</p> */

p { color: black; }                  /* specificity 0,0,0,1 */
.highlight { color: orange; }        /* specificity 0,0,1,0 */
#note { color: green; }              /* specificity 0,1,0,0 */

/* #note wins: color is green */

Output

Worked calculation: the p selector scores (0,0,0,1) because it's one type selector. The .highlight selector scores (0,0,1,0) because it's one class selector. The #note selector scores (0,1,0,0) because it's one ID selector. Comparing left to right, the ID category (0,1,0,0) beats both the class score (0,0,1,0) and the type score (0,0,0,1), so #note's green color is applied to the paragraph, no matter the order the rules appear in the stylesheet.

🏏

Cricket analogy: Just as a single century (ID, #note) always outscores any number of fifties (class, .highlight) or singles (type, p) on the scoreboard, #note's (0,1,0,0) beats .highlight's (0,0,1,0) and p's (0,0,0,1) regardless of batting order.

Key Takeaways

Specificity order from strongest to weakest: inline styles > IDs > classes/attributes/pseudo-classes > types/pseudo-elements.
Specificity is compared category by category, not by simple addition; one ID always beats any number of classes.
When specificity ties, the last rule declared in source order wins.
!important overrides normal cascade rules and should be used only as a last resort.