Como é calculada a especificidade CSS?

Question

Accepted Answer

Quando múltiplas regras alvo o mesmo elemento, **especificidade** decide qual vence. É uma pontuação computada a partir das partes do seletor, comparada como uma tupla `(ids, classes, elementos)`.

```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 da esquerda para a direita; a primeira coluna que difere decide o vencedor.

```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

- Um único **id** supera qualquer número de **classes**; uma única classe supera qualquer número de elementos. (Você não pode "somar" níveis inferiores para vencer um nível superior.)
- Se a especificidade for **igual**, a regra que aparece **depois** na fonte vence (ordem de origem).
- **`!important`** substitui a especificidade normal inteiramente — um último recurso que é difícil de substituir (você precisaria de outro `!important` com especificidade maior).

```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 { }
```

## Por que isso importa

A maioria da frustração "por que meu CSS não está sendo aplicado?" é um conflito de especificidade — uma regra mais específica em outro lugar está vencendo.

Manter seletores baixos e planos (favorecer classes únicas, evitar ids e `!important`) mantém a especificidade previsível, para que os estilos permaneçam fáceis de substituir e manter.