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;
}
Comentarios
The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
thanx jmzc, for less-blessed browsers Selectivizr can be a good option.
¿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) */
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