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:

<style type=”text/css”>
    /*EJEMPLO 1*/
    .parrafo{
    color:#000000;
    font-size:12px;
    }
</style>
<p class=”parrafo”>Esto es un texto del parrafo</p>

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

Vamos a añadir algo más:

<style type=”text/css”>
/*EJEMPLO 2*/
    p{
    color:#FF0000;
    font-size:20px;
    }
    .parrafo{
    color:#000000;
    font-size:12px;
    }
</style>
<p class=”parrafo”>Esto es un texto del parrafo</p>

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:

<style type=”text/css”>
    /*EJEMPLO 3*/
    #contenido p{
    color:#FF0000;
    font-size:20px;
    }
    .parrafo{
    color:#000000;
    font-size:12px;
    }
</style>
<div id=”contenido”>
<p>Esto es un parrafo</p>
<p class="parrafo">Esto es otro parrafo</p>
</div>

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:

<style type=”text/css”>
p{
color:#FF0000;
font-size:20px;
}
.parrafo{
 /*sobreescribe a p en caso de conflicto entre reglas*/
color:#000000;
font-size:12px;
}
</style>

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:

• /*EJEMPLO 4*/
• #contenido p{
• color:#FF0000;
• font-size:20px;
• }
• #contenido p.parrafo{
• color:#000000;
• font-size:12px;
• }

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:

• /*EJEMPLO 5*/
• #contenido{
• color:#FF0000;
• font-size:20px;
• }
• .parrafo{
• color:#000000 !important;
• font-size:12px !important;
• }

• Esto es un texto del parrafo

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):

• /*EJEMPLO 6*/
• .parrafo{
• color:#000000;
• font-size:12px;
• }

• �texto

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