Pseudo-clases y pseudo-elementos en CSS

10. Pseudo-clases y pseudo-elementos en CSS

Gracias a las pseudo-clases y los pseudo-elementos de CSS podemos realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo sin necesidad de crear una clase concreta.

10.1. Pseudo-clases para selección de hijos o hermanos

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

Pseudo-clase	Descripción
:first-child	Primer hijo
:last-child	Último hijo
:first-of-type	Primer hermano de su tipo
:last-of-type	Último hermano de su tipo
:only-child	Hijos únicos
:only-of-type	Únicos hermanos de su tipo
:empty	Elementos que no tienen hijos
:nth-child(n)	Enésimo elemento hijo
:nth-last-child(n)	Enésimo elemento hijo contando desde el último
:nth-of-type(n)	Enésimo hermano de su tipo
:nth-last-of-type(n)	Enésimo hermano de su tipo comenzando desde el último

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; }

0

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; } 

dark

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;}

dark

Ejercicio propuesto

Utiliza las siguientes pseudo-clases y comprueba los resultados:

• tr:nth-child(odd) o tr:nth-child(2n+1)Selecciona las filas impares de una tabla.

• tr:nth-child(even) o tr:nth-child(2n)Selecciona las filas pares de una tabla.

• :nth-child(7)Selecciona el séptimo elemento.

• :nth-child(6n)Selecciona los elementos 6, 12, 18, etc.

• :nth-child(3n+4)Selecciona los elementos 4, 7, 10, 13, etc.

10.2. 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.

Pseudo-clase	Descripción
:link	No visitado por el usuario
:visited	Visitado por el usuario
:hover	Modifica el estilo cuando un elemento apuntador pasa por encima
:active	Se activa cuando el usuario pulsa el elemento
:focus	Se activa cuando tiene el foco sobre el elemento

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;
}

dark

10.3. 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.

Pseudo-elemento	Descripción
::first-line	Primera línea de texto de un elemento
::first-letter	Primera letra de la primera línea de texto de un elemento
::before	Añade contenido al principio del documento
::after	Añade contenido al final del documento
::selection	Coge la porción del texto que se está seleccionando por el usuario

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; }

dark

Comprueba tu aprendizaje