Jerarquia CSS

[vorox]

Hola amigos, les cuento mi duda:

Tengo una CSS con esto (entre otras cosas):

[...]
#content p {
color: #333333;
letter-spacing: 1px;
line-height: 13px;
margin: 15px 15px 25px;
text-align: justify;
word-spacing: 3px;
}

.itemGI .descripcion {
font-size: 10px;
margin: 10px;
}

[...]

Y en el HTML:

<div id="content">
<div class="itemGI">
<p class="descripcion">
...
</p>
</div>
</div>


La cuestión es que, al lanzar firebug me dice que el atributo margin de la clase descripcion no se aplica y se aplica la del #content p. ¿Porqué pasa esto?¿No se supone que una clase al ser mas específico es más relevante en la jerarquia de selectores?

Espero su respuesta y muchas gracias!!!

[pzin]

Pues porque está declarado después. Si quieres que se aplique la regla de #content p, aplica un !important.

[IsaBelM]

te interesa leer este articulo

[pitufoweb]

Iniciado por Bonez

Pues porque está declarado después. Si quieres que se aplique la regla de #content p, aplica un !important.

Bonez, no se aplica por que esta declarado después, si no por que ese selector tiene mas especificidad que el otro.

Tampoco es recomendable usar !important, salvo en casos muy específicos o para debug.


Saludos

[pzin]

Iniciado por pitufoweb

Bonez, no se aplica por que esta declarado después, si no por que ese selector tiene mas especificidad que el otro.

Cierto. Leí mal o rápido, o las dos cosas. De hecho lo que se aplica no es lo que está declarado después sino antes.

Pues como ya te han dicho vorox, si eres más específico en el segundo selector este se acabaría aplicando, por ejemplo añadiendo el ID:

Código CSS:

#content .itemGI .descripcion {...}