Las pseudo-clases más importantes para la selección de hijos o hermanos son las que se muestran en la siguiente tabla.

 Ejemplo pseudoclases first-child, last-child y only-child:

Vamos a utilizar las propiedades first-child, last-child y only-child para seleccionar los párrafos que sean el primer y el último hijo de un contenedor o que sea hijo único.

p:first-child { color: red; } 

p:last-child { color: blue; } 

p:only-child { color: green; }

Ejemplo pseudo-clase nth-child:

Veamos cómo funciona la pseudo-clase nth-child mediante un ejemplo en el que aprovechamos la jerarquía de los elementos para referenciar una etiqueta. En el siguiente código tenemos cuatro elementos <p> que son hermanos entre sí e hijos del elemento <div>.

<div>

    <p>Primer párrafo</p>

    <p>Segundo párrafo</p>

    <p>Tercer párrafo</p>

    <p>Cuarto párrafo</p>

</div>

Utilizando la pseudo-clase nth-child() podemos seleccionar un hijo específico. El número que indiquemos entre paréntesis será la posición del hijo.

En el siguiente código, seleccionaremos todos los párrafos que sean el primer, segundo y cuarto hijo de un contenedor (div, span, etc.).

p:nth-child(1){ color: red; } 

p:nth-child(2){ color: green; } 

p:nth-child(4){ color: blue; } 

Ejemplo odd (impar) y even (par):

Los valores odd y even son muy útiles para seleccionar elementos pares e impares. El valor even representa elementos en posición par y el valor oddrepresenta los elementos en posición impar. En el siguiente ejemplo en el que se ha creado una tabla se muestran en verde las filas impares y en rojo las filas pares.

tr:nth-child(odd){ color: green;}

tr:nth-child(even){ color: red;}

 Pseudo-clases para los estados de un elemento

Podemos utilizar diferentes pseudo-clases para definir las propiedades de ciertos elementos con diferentes estados. Uno de los usos más comunes es en los enlaces <a> aunque se pueden aplicar en otros elementos.

Aplica las siguientes propiedades sobre un enlace y observa las diferencias entre los distintos valores.

a:hover {  text-decoration: overline;}

a:active { background-color: yellow;}

a:link { color: green;}

a:visited { 

color: brown;

}

Pseudo-elementos

A diferencia de las pseudo-clases, los pseudo-elementos no describen un estado sino que permiten añadir estilos a una parte específica del documento. Por ejemplo, el pseudo-elemento :first-line selecciona la primera línea del elemento indicado por el selector.

Aplica las siguientes propiedades sobre diferentes elementos y observa las diferencias entre los distintos resultados.

p::first-line { color: green; }

h2::first-letter { color: blue; }

p::after { content: " - Aloja more don";  color: red; }

p::before { content: "*. "; }

p::selection { color: brown; }