13. 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.
13.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;} /*Todos los párrafos que son primer hijo*/
p:last-child {color: blue;} /*Todos los párrafos que son el último hijo*/
p:only-child {color: green;} /*Todos los párrafos que son hijos únicos*/
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;} /* Filas impares */
tr:nth-child(even){ color: red;} /* Filas pares */
Ejercicio propuesto
Utiliza las siguientes pseudo-clases y comprueba los resultados:
tr:nth-child(odd)otr:nth-child(2n+1)Selecciona las filas impares de una tabla.
tr:nth-child(even)otr: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.
13.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;
}
13.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; }
Comprueba tu apendizaje