:first-child en CSS

La pseudoclase :first-child nos ayuda a dar estilos al primer elemento de una lista de selectores. Por ejemplo, imagina tener una lista en HTML con ul-li o simplemente una lista de los mismos selectores como enlaces (etiquetas a) o párrafos (etiquetas p) y en cualquiera de estos casos buscamos pintar, por ejemplo, al primero elemento hijo de esta lista en color rojo. Esto lo lograremos agregando la pseudoclase :first-child a nuestro selector.

HTML

<ul>
    <li>Primer hijo</li>
    <li>Segundo hijo</li>
    <li>Tercer hijo</li>
</ul>

CSS

ul li:first-child {
   color: red;
}

Si te gustó el post, cuéntame en Twitter 😀