CSS tips | Precedencia/Peso de los selectores.

 

Intro. 

Como todos sabemos el navegador al momento de procesar las hojas de estilo aplica las reglas de forma secuencial --en cascada-- sobre cada uno de los elementos del documento.

Esto sugiere que la última regla definida en una CSS--Hoja de estilo-- para un elemento específico es la que toma precedencia sobre el mismo.

Pero no siempre es así, consideren el siguiente ejemplo:

css:

p#mensaje {color:#000;}
p.rojo{color:#ccc;}

Ambas reglas modifican la propiedad de color, una utilizando un selector de CLASE y otra un selector ID.



Ahora que pasa si tenemos el siguiente elemento:

html:
<p id="mensaje" class="rojo">Hola buen dia.</p>

¿Cuál creen que sea el resultado?

Por confuso que parezca el texto del elemento P será rendereado en color negro por el navegador...  ¿Y qué paso con el efecto "cascada"?

Pues bien en todos los cursos,tutoriales,manuales en linea sobre Hojas de Estilos/CSS que hay regados por la red nunca te mencionan el hecho de que cada uno los selectores --IDs,CLASES,ETIQUETAS, ESTILOS EN LINEA--  tienen un peso/punto específico  y de acuerdo a ese peso una regla puede sobreescribir a otra o no.

Tabla de puntos/pesos de cada uno de los selectores.

1. Estilo en linea: 1000 pts
2. Selector ID : 100 pts
3. Selector Class: 10 pts
4. Selector de etiqueta: 1pt

Cabe señalar que estos pesos son tan sólo una referencia y no es que un ID tenga un peso de 100 pts pero para mantener la correlatividad y se entienda el hecho que un selector ID pesa más que un selector de tipo CLASE y viceversa se usan estos valores.

Explicación.

 

Así vemos que en el ejemplo de la etiqueta P la siguiente  regla:

css:
p#mensaje{color:#000;}

tiene 101 pts. --p (1 pt. para selector de etiqueta) + #mensaje (100 pts. para selectores IDs)--

Mientras que:

css:
p.rojo {color:#ccc;}

tiene  11 pts. --p (1 pt. por ser un selector de etiqueta) + .rojo (10 pts. para selectores de CLASE)--

Al tener menor peso --101 pts. es mayor a 11 pts.-- la segunda regla es "ignorada" por el  navegador, "rompiendo" así el efecto cascada.

Interesante  ¿No?.

Saludos.