17.12.09

La Jerarquía de selectores en CSS

por: Luis Flores

Este artículo todavía no esta completo, paciencia. :)

Muchas veces a los principiantes en CSS les sucede que una clase que han incluido en su hoja de estilos es ignorada por el navegador web, esto es porque los selectores en CSS funcionan en base a una jerarquía y pueda que en su hoja tengan un selector mas importante que el nuevo selector. En este artículo espero poder ayudarte a entender como funciona.

Los selectores principales

Los tres principales selectores son:

#id

#menu, #contenedor, #encabezado
#menu{color:white;}

.clase

.rock, .pop, .rap, .newage
.rock{color:red;}

etiqueta html

div, p, h1, span
div{color:orange;}

La jerarquía

De estos tres el selector de mayor importancia (o prioridad) es el de “#id”, luego le sigue el de “.clase” y por último el “nombre de etiqueta html”. Por ejemplo si tenemos un elemento “P”:

<p id="p" class="p">Este es mi párrafo.</p>

Y el css es:

#p{background:red;}
.p{background:green;}
p{background:blue;}

El navegador ejecuta el estilo asignado a “#p” ya que el selector de mayor importancia es el de “#id”.

Selectores de igual importancia

Cuando el navegador encuentra dos elementos con diferentes selectores pero de igual importancia este aplica al elemento HTML los estilos del último selector. Por ejemplo:

<p class="parrafo nota">Este párrafo tambien es una nota</p>

.parrafo{color:orange;}
.nota{color:red;}

El navegador ejecuta la orden de “.nota” e ignora a la clase “.parrafo”.

.nota{color:red;}
.parrafo{color:orange;}

El navegador ejecuta la orden de “.parrafo” e ignora a la clase “.nota”.

Es por este comportamiento que el nombre completo de las hojas de estilo es “Hojas de Estilo en Cascada/Cascade Style Sheet”.

Si bien una manera de controlar la jerarquía es organizar los selectores en orden del mas general al mas especifico:

.menu{}
.boton{}
.activo{}

Puedas que sin darte cuenta mas adelante escribas un selector con mayor o igual valor y reemplace al que ya estabas utilizando o ya haya otro selector con mayor valor al cual el nuevo selector no puede reemplazar.

Esto sucede a menudo a los que comienzan a aprender css, escriben una nueva clase y el navegador simplemente la ignora y no tienen idea de que es lo que sucede.

Selectores compuestos

La mejor manera de evitar este tipo de errores es creando selectores compuestos; por ejemplo:

<ul class="menu"><ul>
<p class="menu"></p>
<div class="menu"></div>
<span class="menu"></span>

Y el css es:

ul.menu{color:purple;}
p.menu{color:yellow;}
.menu{color:green;}

Los dos primeros selectores solo se aplican a las etiquetas especificadas:

ul.menu = “Etiqueta UL con clase menu”
p.menu = “Etiqueta P con clase menu”

A pesar de que el selector “.menu” se encuentra al final, como los selectores “ul.menu” y “p.menu” incluyen el nombre de la etiqueta html estos tienen mayor valor y el navegador aplica los estilos de “.menu” solamente a las etiquetas “DIV” y “SPAN”.

Más ejemplos de selectores compuestos (de menor valor a mayor valor):

• html
• .clase
• html.clase
• .clase1.clase2
• .clase1.clase2.clase3.clase4
• html.clase1.clase2.clase3.clase4 …
• #id
• html#id
• #id.clase
• html#id.clase

Puedes crear un selector compuesto de 99 clases pero nunca tendrá mayor valor que un selector #id.