Especificidad en CSS
La especificidad en CSS determina qué regla se aplica cuando varias afectan al mismo elemento. Es fundamental para entender y evitar conflictos en los estilos.
Conceptos básicos
La especificidad es un valor numérico que el navegador usa para ponderar las reglas. Los elementos, clases e identificadores tienen diferentes puntuaciones.
Este ejemplo muestra cómo se aplican las reglas de elemento, clase e identificador.
Sistema de puntuación
Los valores de especificidad se componen de categorías: estilos en línea, ID, clases y elementos. Cuanto mayor sea la puntuación, más fuerte es la regla.
| Selector | Valor de especificidad |
|---|---|
| Element selector (p, div) | 0-0-1 |
| Class selector (.class) | 0-1-0 |
| ID selector (#id) | 1-0-0 |
| Inline style | 1-0-0-0 (highest) |
Uso de !important
La declaración !important sobrescribe toda especificidad, por lo que debe usarse con cuidado. Utilízala solo si no hay otra solución.
Consejos sobre especificidad
Gestionar la especificidad ayuda a mantener el código limpio y evitar problemas de estilos. Aquí algunos consejos prácticos:
- Evita los selectores con demasiada especificidad para que sea más fácil sobrescribir reglas.
- Organiza lógicamente y utiliza clases en lugar de IDs siempre que sea posible.
- Minimiza el uso de !important para evitar conflictos difíciles de mantener.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.