Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
La "C" en CSS significa cascada. Es decir, que las reglas de estilo que aparecen más tarde en una hoja de estilos prevalecen sobre las que aparecen con anterioridad en la misma. Pero esto no es siempre así. Existe, además, algo que debes tener en cuenta: la especificidad. En esta lección rápida te mostraré cómo funciona.
Reglas de especificidad
La especificidad en CSS establece básicamente lo siguiente: cuanto más específico sea el selector de una regla CSS, mayor será su prevalencia sobre otras reglas aplicables al mismo elemento. Para descubrir qué selectores tienen un mayor valor de especificidad usa este sistema de cálculo:
- Concede a cada selector HTML de un elemento 1 punto. Por ejemplo: al elemento p
- Concede a cada selector de clase un valor de 10 puntos. Por ejemplo: .column
- Concede a cada selector de ID una valor de 100 puntos. Ejemplo: #wrap
- Suma todos lo puntos de cada selector de una regla CSS concreta para obtener su valor total.
Por ejemplo
1 |
#test { background: red; } /* specificity : 100 */ |
2 |
|
3 |
.item p { background: green; } /* specificity : 10 + 1 = 11 */ |
4 |
|
5 |
p { background: orange; } /* specificity : 1 */ |
6 |
|
7 |
body #wrap p { background: yellow; } /* specificity : 1 + 100 + 1 = 102 */ |
By
