How is CSS specificity calculated?

Question

Accepted Answer

When multiple rules target the same element, **specificity** decides which one wins. It's a score computed from the selector's parts, compared as a tuple `(ids, classes, elements)`.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

Compare left to right; the first column that differs decides the winner.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## Key rules

- A single **id** outweighs any number of **classes**; a single class outweighs any number of elements. (You can't "add up" lower tiers to beat a higher one.)
- If specificity is **equal**, the rule that appears **later** in the source wins (source order).
- **`!important`** overrides normal specificity entirely — a last resort that's hard to override (you'd need another `!important` with higher specificity).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## Practical guidance

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## Why it matters

Most "why isn't my CSS applying?" frustration is a specificity conflict — a more specific rule elsewhere is winning.

Keeping selectors low and flat (favor single classes, avoid ids and `!important`) keeps specificity predictable, so styles stay easy to override and maintain.