How the Cascade Resolves Conflicting Rules

The Cascade

When multiple CSS rules target the same element and set the same property, the browser needs a tie-breaking algorithm. This algorithm is the cascade. It considers three factors in order: origin and importance, specificity, and source order.

Specificity

Specificity is a weight assigned to a selector. The browser computes it as a three-part score (A, B, C) where A counts ID selectors, B counts class/attribute/pseudo-class selectors, and C counts element/pseudo-element selectors. The selector with the higher score wins.

/* Specificity (0,0,1) — element */
p { color: black; }

/* Specificity (0,1,0) — class — wins over element */
.intro { color: navy; }

/* Specificity (1,0,0) — ID — wins over class */
#lead { color: crimson; }

/* Specificity (0,1,1) — class + element */
p.intro { color: teal; }

Source Order

When specificity is equal, the rule that appears later in the stylesheet wins. This is why the order of your CSS rules matters.