Pseudo-clases y pseudo-elementos (1)

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de efecto especial. Los más conocidos son los que usamos en los enlaces y el orden en que colocamos esas definciones es importante:

a {color:white} /* los enlaces se muestran de color blanco */

a:link {color:white} /* son blancos si no los visitamos */
a:visited {color:green} /* se ponen verdes si ya los visitamos */
a:hover {color:red} /* cambian a rojo si colocamos el puntero del ratón encima */
a:active {color:yellow} /* son amarillos cuando están activos */

Tambien es posible usarlas definiendo clases o IDs:

a.ejemplo:hover {color:red}
a#ejemplo:hover {color:red}

Y eventualmente, podríamos aplicarlo a etiquetas que no sean enlaces:

Este es un DIV de ejemplo.

No son las únicas pseudo-clases, hay otras.

:first-child es un poco complicado de explicar. Lo que hace, es darle ciertas propiedades al primer elemento que se encuentra dentro de otro. Por ejemplo:

div#ejemplo img:first-child {border:2px solid red;}

<div id="ejemplo">
  <img src="unaImagen" />
  <img src="otraImagen" />
</div>

Lo que decimos con esta definición es que en un cierto DIV, la primera etiqueta IMG que aparezca tendrá un borde pero las siguientes no:

Hay variantes. Esto colocará en rojo, todos los textos en negrita de la primera etiqueta P que esten dentro de cierto DIV

div#ejemplo p:first-child b {color:red}

<div id="ejemplo">
   <p>Esto será <b>rojo</b> y esto otro <b>también</b>.</p>
   <p>Pero ninguno de <b>estos</b> se verá de color <b>rojo</b>.</p>
</div>

Esto será rojo y esto otro también.

Per ninguno de estos se verá de color rojo.

REFERENCIAS:w3.org