CSS Specificity: The Browser's Tie-Breaking Rule

Why it exists

A single HTML element can be targeted by multiple CSS rules, potentially with conflicting properties. The browser needs a deterministic way to decide which style to apply. Specificity is the algorithm that calculates a selector's 'weight' to resolve these conflicts predictably.

The mental model

Think of specificity as a three-digit score for each CSS selector, written as ID-CLASS-TYPE. When comparing two selectors, the browser checks the score from left to right. A single point in the ID column is worth more than any number of points in the CLASS column. For example, a score of 1-0-0 (one ID) will always beat a score of 0-20-0 (twenty classes).

How it works

The score is calculated by counting the number of components in each category:

Id column

This column counts the number of ID selectors in the full selector (e.g., #main-nav). Each ID adds one to this column.

Class column

This column counts class selectors (.btn), attribute selectors ([type="radio"]), and pseudo-classes (:hover). Each one adds one to this column.

Type column

This column counts element/type selectors (div, h1, p) and pseudo-elements (::before, ::placeholder). Each one adds one to this column.

The universal selector (*), combinators (>, +, ~), and the :where() pseudo-class have a score of 0-0-0 and do not affect specificity. If two selectors have the exact same specificity score, the one that appears later in the CSS file wins.

When to use it

You use specificity every time you write CSS, whether you realize it or not. You leverage it intentionally when you need to override a general style with a more targeted one. For example, you might have a global style for all links (a) but use a more specific selector (.footer a) to make links in the footer a different color.

When not to use it

Avoid creating overly specific selectors, like #page .sidebar ul li a. This practice, known as a 'specificity war,' forces you to write even more specific selectors to override styles later, often leading to the use of !important. This makes the codebase brittle and difficult to maintain. Always aim for the lowest specificity that correctly applies your style.

One canonical example

Consider this CSS and HTML:

Css

p { color: blue; } / Score: 0-0-1 / .lead { color: green; } / Score: 0-1-0 / #intro p { color: red; } / Score: 1-0-1 /

Html

Hello!

The text 'Hello!' will be red. The selector #intro p has a score of 1-0-1, which beats .lead (0-1-0) because its ID column value is higher. It also beats p (0-0-1).