En ocasiones puede que nos encontremos con que, a pesar de haber definido correctamente un estilo, éste parezca no funcionar y no aplicarse al elemento. Puede que sea momento de comprobar si estamos ante un conflicto de jerarquias en CSS.

Aprovechando la jerarquía de estilos en CSS y conociendo cómo funciona, podremos evitar conflictos que nos pueden parecer un error e incluso evitar valores aplicables por herencia. Veamos algunos ejemplos de reglas.

En una situacion normal, podemos tener un codigo CSS como este:



Esto es un texto del parrafo

Lógicamente, el texto se mostrará simplemente en color negro y 12 pixeles.

Vamos a añadir algo más:



Esto es un texto del parrafo

Veremos el parrafo en negro y 12 pixeles, ya que el estilo .parrafo tiene preferencia sobre ‘p’ (aunque parezca una obviedad, en seguida veremos la explicación teórica de por qué es así). El resultado es:

Pero hagamos un pequeño cambio:



Esto es un parrafo


Esto es otro parrafo

Curiosamente, en esta ocasión también veremos el segundo parrafo en rojo y a un tamaño de 20 pixeles (pese a aplicarle class=”parrafo”):

?Dónde está el problema? Básicamente en el concepto de jerarquía a la hora de resolver conflictos. Esta jerarquía depende de 2 ideas:

  • Especifidad
  • Lugar y orden de definición.

La especifidad implica que cuando un elemento se vea afectado por dos o más reglas y exista conflicto entre sus declaraciones tendrán preferencia las de la regla más específica.

Esta especifidad conlleva una jerarquia en los tipos de regla utilizada:

  1. Los id tienen preferencia sobre las clases y las etiquetas
  2. Las clases tienen preferencia sobre las etiquetas
  3. En cualquier caso, los estilos definidos dentro de la etiqueta me diante el atributo “style” (inline) tienen preferencia sobre las reglas declaradas en el encabezado del documemto (embedded) y éstas sobre las definidas en un archivo css externo (linked, enlazado con @import)
  4. En caso de empate, tiene preferncia la última regla definida

Si recordamos el segundo ejemplo:

Veremos que la clase sobreescribe la etiqueta (a causa del punto 2: ).

El ejemplo 3 (‘#contenido p’ frente a ‘.parrafo’) puede ser un poco menos evidente, pero existe una forma sencilla de calcular, en caso de conflicto, qué regla tiene preferencia sobre otra (no es 100% eficaz, pero sí lo es al 99%):

La formula es la siguiente:
(Numero de id’s en el selector x 100)+(numero de clases en el selector x 10)+(numero de etiquetas en el selector)

Por tanto, en el tercer ejemplo, la operacion resultante es:

  • #contenido p = 101
  • .parrafo = 10

Y por ello la primera regla tiene preferencia. Recordando de nuevo el ejemplo 2:

  • p=1
  • .parrafo=10

¿Como podemos superarlo? Si hubieramos definido las reglas como:

El resultado del cálculo será:

  • #contenido p= 101
  • #contenido p.parrafo = 111

Conseguir?amos para #contenido p.parrafo un peso de 111, por lo que adquiere preferencia sobre #parrafo a secas (peso=100), utilizando por tanto el color negro y 12 px.El resto del bloque div conservar?a el estilo de #parrafo p.

Es decir, a trav??s de una mayor especifidad podemos evitar problemas

Aparte de utilizar una mayor especifidad para resolver este tipo de conflictos, existe otra solución, no tan recomendable, pero sí eficaz: El valor !important, que tiene preferencia sobre cualquier regla existente (por eso conviene utilizarla con precaución).:

Con !important escrito detr?s de un valor podemos sobreescribir cualquier otro que en principio tendr?a preferencia:





texto

El resultado es:

Y por último, un ejemplo de cómo el lugar donde se defina la regla influye en su jerarquía (punto 3): Hemos definido una clase .parrafo, la hemos aplicado a una etiqueta

y hemos añadido a ésta un estilo interno (inline):




texto

El resultado es éste (style sobreescribe a la clase para el conflicto en el tamaño de fuente):