Capítulo 11:

 Especificidad

Hay ocasiones en las que podemos encontrarnos en la situación de que un mismo elemento tenmúltiples definiciones para ser formateado de formas distintas:

.grape {color: purple;}

H1 {color: red;}

<H1 CLASS="grape">Meerkat <EM>Central</EM></H1>

En estos casos CSS define que se debe aplicar el estilo que sea más específico, ejemplo de gradación que aplicará un navegador a la hora de aplicar los estilos:

H1 {color: red;} /* specificity = 1 */

P EM {color: purple;} /* specificity = 2 */

.grape {color: purple;} /* specificity = 10 */

P.bright {color: yellow;} /* specificity = 11 */

P.bright EM.dark {color: brown;} /* specificity = 22 */

#id216 {color: blue;} /* specificity = 100 */

Por definición, los estilos heredados tendrán un valor de especificidad 0 y los aplicados a través de la propiedad STYLE, un valor superior a 100.

Importancia.- Podemos marcar que ciertos estilos son más importantes que otros, pudiendo así modificar las reglas de especificidad aplicadas por el navegador. Un estilo importante se define añadiendo la coletilla !important al final del mismo:

P.dark {color: #333 !important; background: white;}

Esto estilos recibirán siempre el valor de especificidad más alto considerado por el navegador.

Como los estilos heredados tienen un valor de especificidad 0, esta definición se mantendrá aunque el estilo heredado contuviera la definicion !important.

 

Cursos similares a CSS práctico

1. Curso de CSS. Selectores Selectores CSS . Con este curso de informática podrás seleccionar elementos de... [08/04/11]				78
2. CSS. Edición de fondos Si deseas aprender a crear una página web , este tutorial es fundamental, en él... [08/04/11]				181
3. Curso de CSS. Modelo de caja Modelo de caja CSS. En esta ocasión te presentamos un curso de programación CSS... [08/04/11]				210