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

  • ,

    , , 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><br />
  <span>Hijo</span><br />
  <p>Hijo <b>nieto</b></p><br />
  <pre>Hijo <code>nieto <i>bisnieto</i></code></pre><br />
</div>

    El CSS:

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

    Ver ejemplo{.verejemplo}