Especificidad en CSS
Cuando dos reglas fijan la misma propiedad gana el selector más específico — y la cuenta no es pareja.
/* 0,0,1 */
a { color: #2b6cb0; }
/* 0,1,1 -- le gana a la de arriba */
a.quiet { color: #64748b; }
/* 0,2,1 */
nav a.quiet { color: #0f172a; }
/* 1,0,0 -- les gana a las tres */
#footer-link { color: #94a3b8; }
/* :where() no suma nada, así que esta queda en 0,0,1 */
:where(nav, aside) a { text-decoration: underline; }Cómo funciona
- Un id le gana a cualquier cantidad de clases; una clase, a cualquier cantidad de etiquetas.
- Lee un selector como tres números: ids, clases, elementos.
- La última regla gana solo cuando la especificidad empata.
Palabras clave y builtins usados aquí
color
El intento, en números
- Líneas
- 14
- Caracteres a escribir
- 325
- Tokens
- 53
- Ritmo de tres estrellas
- 70 tpm
Al ritmo de tres estrellas de 70 tokens por minuto, este intento toma unos 45 segundos.
Paso 1 de 3 en La cascada; paso 7 de 26 en Selectores y el modelo de caja.