La descendencia del CSS

6/dic/2007 14

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:

Ejemplo Selectores Descendentes

ul a {
     color: red;
}

En el ejemplo anterior, vemos que el color rojo se aplicará solamente a los enlaces <a> que estén dentro de un <ul>, y no a otros. Si queremos ser más específicos, podemos definir id‘s o class‘es:

.menu a {
     color: red;
}

Aquí el color rojo estará en toda etiqueta que tenga una class="menu". Y siendo más específico aún, podemos definir si esa class pertenece a cierta etiqueta:

ul.menu a {
     color: red;
}

Aquí sólo se verá el rojo del link si está dentro de un <ul class="menu"> y no otra etiqueta con esa misma class.

Ver ejemplo 1

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)

Ejemplo Selectores Hijo

Se usa para afectar a uno hijo de determinado elemento.

ul li > a {
     color: red;
}

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 <li>, y no dentro de otra sub etiqueta.

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

Usando el ejemplo anterior, veremos que utilizando los selectores hijos el color rojo se aplicará sólo al <a> contenido dentro del <li>, y no al que está dentro de <em> ya que pasó a ser su hijo y no del <li> (imagina que ahora es su nieto).

Ver ejemplo 2

Selectores Hermanos Adyacentes (no soportado por IE6)

Ejemplo Selectores Hermanos Adyacentes

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 {
     color: red;
}

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 <table><tr><td></td></tr></table>).

Comentarios

  1. Mañungo [#]

    Que buena! Justo hoy tuve una duda sobre adyacencia de nodos y me encuentro con este post… aprovecho de preguntar aca tonces:

    a em { color: red; } -> pinta RED los EM que vienen despues de un A… como hago para elegir los A ?

    Dicho de otro mono, existe un selector para elegir solo los A que anteceden un EM ?

  2. CSSLab Admin [#]

    aver mañungo, nose si lo pusiste bien pero si tienes a em { color: red; } lo q hace es q los <em> dentro de <a> se pongan rojo, o sea <a><em> si quieres q quede rojo <a> solo declaras: a { color: red; }. salu2.

  3. Mañungo [#]

    Jaja parece que me comi el mas… a ver si ahora me explico: Yo se que “A mas EM” selecciona los EM que vienen DESPUES de un A.
    Cómo hago para seleccionar los A que vienen ANTES de un EM ?

  4. CSSLab Admin [#]

    ok ahora si pero no. <a>+<em> selecciona los <em> q estan al lado de <a> (hermanos). al reves no es posible de realizarse, no con css. salu2.

  5. fearlex [#]

    Muy bueno, eso me aclaro unas cuantas duditas 😀

    Gracias como siempre 😀

  6. D@vis [#]

    Hola que tal soy peruano solo para agradecerte por que siempre pones tips muy acertados thanks man

  7. Victor San Martin [#]

    Los últimos dos no los conocía bien, ni sabia cual era su idea, por supuesto ya quede clarito… que lastima que no funciona en IE6, pero con mi framework javascript favorito puedo usarlos jejeje

    Saludos.

  8. Jose Delgado [#]

    Muy bien explicado, el concepto de la herencia es algo difícil de entender para los que recién empiezan con CSS, pero gracias a este artículo se les hará mas fácil empezar a comprenderlo.
    Saludos desde Perú

  9. monica [#]

    OH! eres todo sabiduría, gracias!!
    Me apunto a los planes de exterminio del IE6. ^_

  10. CSSLab - Las 10 leyes de Jorge para el diseño y desarrollo web [#]

    […] y la classitis, y toda clase de abuso reiterativo innecesario en el codigo fuente. Estudia bien las herencias de estilos, la especificidad y cómo ordenar tu código […]

  11. Félix Manuel [#]

    Muchísimas gracias, al fin pude entender los selectores > y +.

  12. Checkboxes con estilo ↝ CSSLab [#]

    […] esta técnica reordenamos el HTML ya que trabajaremos con selectores avanzados de atributos […]

  13. Star-Rating sólo con CSS | CSSLab | Laboratorio de ideas web [#]

    […] IE7 no eran posible utilizarlos. Con soporte IE8+ ya podemos utilizar tranquilamente -por ejemplo- selectores avanzados de atributos y descendientes, los que precisamente son los protagonistas de este […]

  14. La pseudo-class :not | CSSLab | Laboratorio de ideas web [#]

    […] y luego escribíamos la excepción y dependiendo de cómo, podía ser con clase CSS ó selectores hermanos/adyacentes u otros. Por ejemplo, para darle un borde separador a todos los elementos de un menú menos para el […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab