Cargando...

Especificidad CSS

Ya sabes escribir selectores. En hojas reales las reglas chocan: dos reglas apuntan al mismo elemento y la misma propiedad. El navegador no elige al azar — usa la especificidad y, si empatan, el orden en el archivo.

¿Qué significa especificidad?

La especificidad es un peso que el navegador da a un selector. En conflicto, gana el selector más pesado para esa propiedad. Para el día a día memoriza esta escalera: style en línea > id > class (y atributo / pseudo-clase) > element (y pseudo-elemento). El * y los combinadores por sí solos no suman peso.

Ranking de un vistazo

Aprende este orden primero. Hay más detalles, pero la mayoría de líos de principiante se resuelven con esta escalera.

📊 Ranking de especificidad CSS (cotidiano)

Tipo Ejemplos Suele vencer a
Style en línea style="color: red" Casi todo en la hoja
Id #hero, #nav Classes y elementos
Class / atributo / pseudo-clase .card, [type="email"], :hover Selectores de elemento
Element / pseudo-elemento p, h1, ::before Solo reglas más débiles o iguales (luego orden de origen)

class gana a element

Un selector de tipo es amplio. Una class es más precisa — gana el color de la class. El orden solo importa cuando los pesos son iguales.

class gana sobre element

css
CSS Code 
p {
color: #334155;
}

.note {
color: #0f766e;
}

Cómo leer el conflicto

Para <p class="note"> coinciden ambas. .note es class; p es element. Gana class → texto teal.

id gana a class

Un id pesa más que una class. Para diseño reutilizable prefiere class; guarda id para un gancho único.

id gana sobre class

css
CSS Code 
.note {
color: #0f766e;
}

#title {
color: #9f1239;
}

Por qué importa

Si <h1 id="title" class="note"> queda granate, ganó el id — no por «sentirse importante», sino por mayor peso.

Mismo peso → gana la regla posterior

Cuando dos reglas tienen la misma especificidad, gana la que aparece más tarde en el CSS para esa propiedad.

Mismo peso — decide el orden de origen

css
CSS Code 
.card {
border-color: #cbd5e1;
}

.card {
border-color: #0f766e;
}

Hábito en el empate

Ambos selectores son una class. La segunda regla .card gana → borde teal. Si querías el primer color, comprueba que no coincida también un selector más fuerte.

Selectores combinados en la práctica

Los selectores se combinan: nav a.button:hover es más fuerte que un a solo porque añade class y pseudo-clase. No hace falta calculadora en cada línea — pregunta: «¿Lleva id? ¿Class extra? ¿O solo etiquetas?»

Selector combinado gana al element desnudo

css
CSS Code 
a {
color: #334155;
}

nav a.button {
color: #0f766e;
}

Sobre !important

!important puede saltarse la especificidad normal. Es un extintor, no una herramienta diaria. Abusar dificulta cambios después. Primero estructura y selectores más claros.

Buenos hábitos

  • Para el aspecto class; id para un gancho único
  • ¿Atascado? Mira en qué peldaño de la escalera está cada selector
  • Mismo peso → mira la regla posterior en el archivo
  • No encadenes selectores largos solo para «ganar» — se rompen al cambiar el HTML
  • Deja !important para el final, no para el principio

Pruébalo tú

  1. Página con <p class="note">Hola</p>, <h1 id="title" class="note">Título</h1> y <a class="button">Ir</a> dentro de <nav>.
  2. Pon el par element vs class (p gris, .note teal) y confirma que el párrafo note es teal.
  3. Añade #title { color: #9f1239; } — el encabezado debe ponerse granate pese a .note.
  4. Escribe dos reglas .card de border-color y confirma que gana la segunda.
  5. Opcional: compara a { … } con nav a.button { … } en un enlace del nav.

Errores habituales

  • Creer que «más declaraciones» suben la especificidad — no
  • Asumir que el último archivo siempre vence a un id — el mayor peso sigue ganando
  • Usar #todo o !important como arreglo por defecto
  • Mezclar peldaños (tratar class como element)
  • Olvidar que el empate vuelve al orden de origen

Resumen

  • La especificidad decide conflictos sobre la misma propiedad
  • Escalera cotidiana: inline > id > class/atributo/pseudo-clase > element/pseudo-elemento
  • Mismo peso → regla posterior
  • Para el aspecto, class; id y !important raros
  • Lee primero el peldaño, luego el orden
  • Practica con p / .note / #title hasta que el ganador sea obvio

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial