Alcanzar el primer hijo de un selector pero no su descendencia

18/dic/2012 4

Problema: a través de CSS, necesitaba entregar estilos al primer hijo de un elemento sin afectar la herencia (nietos y más allá); sólo necesito darle estilo al hijo directo de un selector.

Además: debiera ser genérico, sin restringirse al tipo de selector hijo que exista. Pueden ser <li>, <p>, <span>, etc.

Y por último: que utilizara sólo CSS, nada de JavaScript.

Solución: después de mucho pensar y debatir en Twitter, dí con una una elegante solución que me satisfizo completamente. Para el HTML:

<div>
<span>Hijo</span>
<p>Hijo <b>nieto</b></p>
<pre>Hijo <code>nieto <i>bisnieto</i></code></pre>
</div>

El CSS:

div * {
   color: blue;
   background: gray;
}
   div > :nth-child(n+1)  {
      color: red;
      background: darkgrey;
   }

Ver ejemplo

Comentarios

  1. jmzc [#]

    The :nth-child() selector is supported in all major browsers, except IE8 and earlier.

  2. Jorge Epuñan [#]

    thanx jmzc, for less-blessed browsers Selectivizr can be a good option.

  3. Pacotole [#]

    ¿no sería más sencillo?
    div * { color: blue; background: gray; } /* toda la descendencia */
    div > * { color: red; background: darkgrey; } /* todos los hijos directos (sea el tag que sea) */

  4. Jorge Epuñan [#]

    Pacotole: efectivamente tambien cumple con lo que yo necesitaba, aunq el unico pero seria que tiene menos peso especifico por ser el selector universal. ejemplo

Deja tu Comentario

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

CSSLab