Avanzadocss
Cascada y Especificidad
Entiende como CSS decide que estilos aplicar cuando hay conflictos: cascada, herencia y especificidad.
Como funciona la especificidad
La especificidad determina que regla "gana" cuando varias aplican al mismo elemento. Se calcula como un vector de 4 componentes: inline > ID > clase > elemento.
- Estilos inline: (1,0,0,0)
- ID (
#id): (0,1,0,0)
- Clase (.clase), atributo, pseudo-clase: (0,0,1,0)
- Elemento (div), pseudo-elemento: (0,0,0,1)Ejemplos de especificidad
Es fundamental entender la especificidad para depurar conflictos de estilos sin recurrir a
!important.css
1/* Especificidad: 0,0,0,1 */
2p { color: black; }
3
4/* Especificidad: 0,0,1,0 */
5.destacado { color: blue; }
6
7/* Especificidad: 0,0,1,1 */
8p.destacado { color: green; }
9
10/* Especificidad: 0,1,0,0 */
11#titulo { color: red; }
12
13/* Especificidad: 0,1,1,0 - GANA */
14#titulo.activo { color: purple; }
15
16/* Evita !important salvo casos excepcionales */
17/* .error { color: red !important; } */
18
19/* Mejor: usa una clase mas especifica */
20.form .field .error-message { color: red; }Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (HTML)
Output