CSS Specificity

Specificity is the scoring system the browser uses to decide which selector "wins" when two rules of the same origin and importance target the same element with conflicting declarations. The higher-specificity selector's declaration is applied, regardless of which rule was written first.

Specificity is calculated, not guessed — it follows a concrete, comparable formula. Learning to calculate it by hand removes almost all of the mystery around "why isn't my CSS working," which is one of the most common frustrations for developers new to the language.

Why it matters

When a style refuses to apply, the cause is nearly always specificity: another selector outweighs yours. Being able to calculate which of two selectors wins turns hours of trial and error into a quick look. It is also one of the most reliably asked CSS interview questions.

The Specificity Hierarchy

Specificity is commonly represented as a tuple of four values, often written as (a, b, c, d), compared left to right like version numbers.

• Inline styles (style="...") — highest specificity, effectively (1, 0, 0, 0). Beats any selector in an external or internal stylesheet.
• ID selectors — each contributes (0, 1, 0, 0). One ID always outweighs any number of classes.
• Class, attribute, and pseudo-class selectors — each contributes (0, 0, 1, 0). Examples: .card, [type="text"], :hover.
• Type selectors and pseudo-elements — each contributes (0, 0, 0, 1). Examples: div, p, ::before.

Calculating and Comparing Specificity

To score a selector, count how many of each category it contains, then compare tuples left to right — a single ID beats any number of classes, and a single class beats any number of type selectors. The universal selector (*) and combinators (>, +, ~, space) add no specificity value at all. For example, #nav .link scores (0,1,1,0) while nav ul li a scores (0,0,0,4) — the first wins even though the second selector has more parts written out.

A Concrete Conflict Example

Given .button { color: blue; } and #submit-btn { color: red; } both targeting the same button, the ID rule wins and the button renders red — its specificity (0,1,0,0) beats the class rule's (0,0,1,0), even if the class rule appears later in the file. If a third rule button { color: green; } is added, it loses to both, since a bare type selector has the lowest specificity of the three.

Examples

<!-- <button id="submit-btn" class="button">Submit</button> -->

button {
  color: green;           /* specificity (0,0,0,1) */
}

.button {
  color: blue;             /* specificity (0,0,1,0) */
}

#submit-btn {
  color: red;               /* specificity (0,1,0,0) -- wins */
}

The button text renders red because the ID selector has the highest specificity of the three competing rules, even though it targets the same element as the others.

nav ul li a.active {
  /* type(4) + class(1) = (0,0,1,4) */
  color: orange;
}

.nav-list .active {
  /* class(2) = (0,0,2,0) -- higher, wins over the rule above */
  color: purple;
}

The active navigation link renders purple, since two class selectors (0,0,2,0) outrank one class plus four type selectors (0,0,1,4) — the class column is compared first and 2 beats 1.

Exercise

The second rule comes later, but the paragraph is still red, because the first selector is more specific. Without using !important and without changing or moving the first rule, change the selector of the second rule so that it wins and the paragraph turns green.

Expected result: the paragraph is green.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main p {
  color: red;
}

p {
  color: green;
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main p {
  color: red;
}

body main p {
  color: green;
}

Quick quiz

Interview questions