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.
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 |
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
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
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 odd
representa 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
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.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
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