Herencia, contexto, y especificidad
Por herencia entendemos la capacidad que tienen algunos elementos de adquirir algunas reglas de sus ascendientes.
Por lo tanto habrá situaciones en las que dependiendo del contexto en el que se encuentre un elemento podrá tener un color de texto, y tipo de fuente concretos aunque no se lo hayamos definido previamente en las reglas de estilo de su selector, lo que significa que ha heredado esas reglas de su ascendiente.
Si definimos un color de texto naranja para el “body”, cualquier elemento contenido en su interior ( descendiente de body)heredará esa regla y se mostrará con texto naranja aunque esto no haya sido definido explícitamente en el selector del elemento. Pongamos el ejemplo de un elemento de lista “li” dentro de “body” que hereda el texto en naranja.
Pero si definimos un color distinto en un selector más específico, por ejemplo:color azul en el selector “li”, esta regla prevalecerá siempre sobre la heredada de body y el elemento de lista se mostrará con texto azul.
Pero también puede darse una situación intermedia, podemos haber definido el texto en naranja para el body, podemos no haber especificado ninguna regla para el color de texto en el selector “li”, y en cambio tenemos un color de texto en gris definido en el selector de lista “ul”. En este caso el elemento de lista “li” se mostrará en gris ya que no hereda el color de body si no de “ul” que es su ascendiente directo.
En la herencia siempre prevalecerán las reglas definidas para el elemento más específico, y si este no tiene una regla concreta definida heredará la de su ascendiente más próximo donde sí esté definida.
Veamos un ejemplo gráfico que combina características de herencia y de contextualidad.
Analicemos como se comportan herencia y contextualidad hasta llegar al resultado de la imagen 3.1.
1º) Texto de color azul del primer “li”: Este elemento de lista hereda en primer lugar el color de texto gris de body, pero sobre este prevalece el naranja heredado de “ul.noticias”, pero sobre estos prevalece el azul declarado en selector “li”, ya que en este caso es el elemento más específico.
2º) Texto en color verde del segundo “li”: Este elemento de lista también hereda en primer lugar el color gris de body, pero sobre el también prevalece el naranja de “ul.noticias”, y sobre estos el azul declarado en el selector “li” para todo el documento, pero sobre todos ellos se impone siempre el más específico, en este caso es el color verde declarado en el selector contextual “li”
3º) El párrafo del final: Hereda directamente el color gris de body, ya que no hay ningún selector de párrafo declarado en la hoja de estilo.
Especificidad
Existen situaciones en que la presentación de un elemento puede verse afectada por más de un selector. O dicho de otro modo, dos o más selectores pueden indicar presentaciones distintas a un mismo elemento. Por lo tanto al desarrollar una hoja de estilo necesitamos saber como se resuelven estos conflictos.
Básicamente podemos decir que el grado de influencia o prevalencia de un selector sobre otro, dependerá del tipo de selector, y del número de elementos que especifiquen su contexto.
El tipo de selector influye ya que los selectores con mayor grado de influencia o prevalencia son los de tipo “id” seguidos de los selectores de clase.
El número de elementos que se indican como contexto del selector influye directamente en la prevalencia, pero esta prevalencia es menor que en los selectores de clase y menor que los selectores “id”.
Si tuviésemos que cuantificar de algún modo en que medida afecta cada caso a la prevalencia, podríamos decir que un selector “id” tiene un valor de 100, un selector de clase vale 10, y cada elemento de contexto vale 1 punto. De este modo si hacemos la suma de los factores que intervienen podremos saber finalmente la prevalencia de cada selector frente a los demás.
Pero una vez más no nos dejemos engañar por las cosas que parecen y no son. Debemos tener claro que (.nombreClase ul li) no vale lo mismo que (ul li.nombreClase). Esta vez el orden de sumandos sí altera la suma.
El mejor modo de entenderlo es analizando detenidamente un ejemplo real.
En la Página de ejemplo podemos comprobar el comportamiento de algunos elementos en función de su especificidad.