La descendencia del CSS

Como verán, hasta las Hojas de Estilo en Cascada tienen descendencia. A través de CSS podemos reconocer las etiquetas que en la estructura HTML pertenecen o están contenidas dentro de otra etiqueta, y aplicarles estilos determinados. En CSS estos se llaman Selectores Descendentes. Pero me gustaría dejar claro desde el principio que 2 de estos selectores no funcionan en IE6. ¿Y para qué sigo escribiendo sobre esto? -podrían preguntarse. Bueno porque es una manera muy útil de manejar estilos, y porque esto refuerza que IE6 apesta como browser. Espero algún día que este navegador sea borrado completamente de la faz de la tierra y podamos utilizar todos los estándares habidos y por haber, sin preocuparnos por el soporte. Bueno, hecho los descargos.

Selectores Descendentes⌗

Se ocupan para afectar a todos los elementos que pertenecen (o descenden) de una determinada etiqueta padre. Esto es muy común y hace falta sólo el ejemplo en CSS para que se den cuenta de lo que me refiero:

ul a {<br />
     color: red;<br />
}

ul.menu a {<br />
     color: red;<br />
}

y no otra etiqueta con esa misma class.

[Ver ejemplo 1][1]{.verejemplo}

Hay que tener cuidado con ser tan específico declarando estilos, ya que suelen haber problemas posteriores de que no se reconoce cierto estilo, siendo que está declarado por diferencias de peso entre éstas. Esta especificidad pienso abordarlo muy luego, ya que es un problema muy común e importante de conocer. Pero mientras mejor sigo con esto.

Selectores Hijo (no soportado por IE6)⌗



Se usa para afectar a uno hijo de determinado elemento.

ul li > a {<br />
     color: red;<br />
}

Copy

Hasta aquí suena igual que los selectores descendentes. La diferencia es que con los selectores hijo afectarán solamente los links que estén dentro del

, y no dentro de otra sub etiqueta.

<ul><br />
     <li><a href="">Link 1</a></li><br />
     <li><em><a href="">Link 1</a></em></li><br />
</ul>

Copy

Usando el ejemplo anterior, veremos que utilizando los selectores hijos el color rojo se aplicará sólo al contenido dentro del

• , y no al que está dentro de ya que pasó a ser su hijo y no del
• (imagina que ahora es su nieto).

  [Ver ejemplo 2][2]{.verejemplo}

  Selectores Hermanos Adyacentes (no soportado por IE6)⌗

  

  Son los que comparten la misma etiqueta padre y que se encuentran uno a lado del otro en la estructura HTML. Se identifica con un signo + entre los hermanos, y la etiqueta que tendrá el estilo será la última declarada luego de este +.

  p a+em {<br />
       color: red;<br />
  }

  Copy

  Ver ejemplo 3

  Finalmente, ¿qué uso tienen estos últimos 2 selectores, si no son soportados por IE6? Bien, a través de tu framework de Javascript favorito (que suelen ser crossbrowser) puedes darles un gran uso, por ejemplo manipulando classes para tablas, que suelen tener muchos elementos anidados (para una simple celda tienes que escribir

  ).

  [1]: http://www.csslab.cl/ejemplos/descendentes/ejemplo1.html “Enlace en CSSLab para “Ver Ejemplo 1"” [2]: http://www.csslab.cl/ejemplos/descendentes/ejemplo2.html “Enlace en CSSLab para “Ver Ejemplo 2"”