Categoria: CSS

P

ara complementar el último post que trataba sobre la sentencia !important trataremos ahora el concepto de especificidad.

La especificidad de un elemento es un valor numérico que utiliza el navegador para ordenar reglas de estilo contradictorias. Su cálculo se define como un número de 4 cifras ‘ABCD’ tal que:

 ‘A’ (millares):  Se le asigna 1 por cada  propiedad que afecte al elemento y que esté integrada en línea en el código HTML con el atributo ‘style’ .

‘B’ (centenas): Se le asigna 1 por cada propiedad que afecte al elemento y que esté definida a través de un identificador (id).

‘C’ (decenas): Se le asigna 1 por cada propiedad que afecte al elemento y que esté definida a través de una clase, pseudo-clase o selector de atributo.

‘D’ (unidades): Se le asigna 1 por cada propiedad que afecte al elemento y que esté definida a través de selector de elemento (p, div, ul, …) o pseudo-elemento.

En caso de igualdad de especificidad la propiedad definida en último lugar será la que muestre el navegador.

Si la propiedad que nos afecta está definida mediante !important, esta propiedad supera la especificidad de cualquier otra y será por tanto la que muestre el navegador en caso de conflicto.

Pero lo mejor será verlo sobre un ejemplo que contiene varias contradicciones en la definición de su estilo:

 

<div>

<!–ESPECIFICIDAD:Ejemplo–>
<div class=”color”>
<p> La especificidad de un elemento es un valor numérico que utiliza el navegador para ordenar reglas de estilo contradictorias.</p>
</div>

</div>

 

Así, con este ejemplo HTML y las siguientes indicaciones de estilo CSS se define la especificidad como sigue:

ELEMENTOS{propiedad afectada}¿ AFECTA A <p>  ?CALCULO ESPECIFICIDADESPECIFICIDAD
body {color: black;}NO1000 (no aplica) —
body div.color p {color: blue;}SI1000+0001+0010+0001=101012
.color {color: red;}NO0010 (no aplica)
div.color {color: green;}NO0001+0010=0011 (no aplica)
div.color p {color: yellow;}SI0001+0010+0001=00120012
div:first-child {color: orange;}SI0001+0010=00110011

La mayor especificidad (1012) determina el estilo que se muestra en el navegador, por tanto, en este caso el texto se mostrará de color azul.

Encontrarás mas información haciendo click aquí.

Post recomendados

Deja un comentario