¿Cómo se calcula la especificidad de CSS?

Question

Accepted Answer

Cuando múltiples reglas apuntan al mismo elemento, la **especificidad** decide cuál gana. Es una puntuación calculada a partir de las partes del selector, comparada como una tupla `(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)
```

Compara de izquierda a derecha; la primera columna que difiere decide el ganador.

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

## Reglas clave

- Un único **id** supera cualquier cantidad de **clases**; una única clase supera cualquier cantidad de elementos. (No puedes "sumar" niveles inferiores para vencer a uno superior.)
- Si la especificidad es **igual**, la regla que aparece **después** en el código fuente gana (order de fuente).
- **`!important`** anula la especificidad normal por completo — un último recurso que es difícil de anular (necesitarías otro `!important` con mayor especificidad).

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

## Orientación práctica

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

## Por qué es importante

La mayoría de la frustración "¿por qué no se aplica mi CSS?" es un conflicto de especificidad — una regla más específica en otro lugar está ganando.

Mantener los selectores bajos y planos (favorecer clases únicas, evitar ids y `!important`) mantiene la especificidad predecible, para que los estilos sean fáciles de anular y mantener.