Alcanzar el primer hijo de un selector pero no su descendencia

18/dic/2012 5

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

  5. JesseSar [#]

    Огромное тебе СПАСИБО

Deja tu Comentario

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

CSSLab