Herencia CSS o… ¿Por qué demonios no se aplica esta propiedad?

Cómo determinar la importancia de un selector css más allá de su orden o su ubicación.

jueves, 30 de junio de 2016
Categorías: Maquetación
Text_2

Échale un vistazo a la imagen de la entrada, ¿Qué color dirías que tendrá el texto del h1? Si has pensado en otro color que no sea el rojo este post es para ti.

Probablemente habrás pensado que la última propiedad que declaramos sobreescribe las anteriores, y, en parte, tienes razón pero el orden no es lo único que influye a la hora de determinar la declaración de estilos más importante.

 

Calculando la importancia de las declaraciones de estilos.

Cuando tenemos un selector este será más o menos importante dependiendo de lo concreto que sea al apuntar a un elemento. Para calcular la importancia solo hay que tomar una tupla de cuatro valores (A = estilo en línea, B = id, C = clase, D = elemento) y sumar 1 punto a cada posición según la cantidad de clases, IDs, etc que use el selector.

Vamos con un ejemplo:

Tenemos  #padre .contenedor .columna p  en nuestra hoja de estilos, esto quiere decir que el valor A será de 0 (no se aplica en línea). Por otro lado, el selector contiene un id y dos selectores por lo que los valor de B será 1 y el de C será de 2. Por último, el selector apunta a los párrafos así que la posición D tendrá un valor de 1. El resultado final es de (0, 1, 2, 1).

Ahora lo comparamos con otro selector que tenemos en la misma hoja de estilos:  #padre #hijo p  este tiene dos IDs y también se aplica a los párrafos por lo que su valor de B será 2 y el de D será 1. Su tupla quedaría así: (0, 2, 0, 1).

Para saber cuál tiene más importancia solo tienes que comparar de izquierda a derecha posición por posición hasta que uno de los dos gane.

En este caso, ambos tienen un valor en A de 0, pero en B el segundo selector tiene un valor de 2 y el primero solo de 1. Por lo tanto, independientemente del orden en el que se encuentren estos selectores el segundo siempre tendrá más importancia.

Puedes ver un ejemplo práctico en el siguiente jsfiddle:

Después de años trabajando con css descubrí esto hace unos meses en un curso online que hice para repasar conceptos básicos en MiriadaX.

Este es el curso: https://miriadax.net/web/html5mooc/inicio

Y tú, ¿Sabías esto sobre la herencia en css? Deja tu comentario.

TAGS

Compartir

Comentarios