Uso de Pseudoclases Estructurales y Funcionales
Las pseudo-clases permiten seleccionar elementos de manera precisa según su posición dentro de un contenedor. A continuación, se presentan algunas de las más utilizadas.
:first-child
La pseudo-clase :first-child selecciona un elemento que es el primer hijo de su elemento padre, sin importar su etiqueta o nombre de clase. Considera el siguiente ejemplo para mayor claridad. Tenemos un conjunto de elementos y, solo para el primer elemento (el primer elemento <li>), queremos establecer su propiedad color en blue.
index.html
styles.css
Salida
Solo se seleccionó el primer elemento de preguntas frecuentes y se aplicaron estilos específicos.
:last-child
La pseudo-clase :last-child selecciona el último hijo de su elemento padre, permitiendo modificar cualquiera de sus propiedades. Consideremos un ejemplo para ilustrar cómo utilizar esta pseudo-clase de manera efectiva.
index.html
styles.css
Salida
:nth-child
La pseudo-clase :nth-child permite seleccionar elementos según su posición dentro de una lista de elementos hermanos. Se puede comenzar con una selección simple especificando un número. Por ejemplo:
index.html
styles.css
Salida
Los estilos de acento se aplicaron solo a los elementos seleccionados (2º y 3º).
Avanzado :nth-child
Para escenarios más complejos, puedes utilizar la fórmula an+b para seleccionar múltiples elementos según su posición. Así es como funciona la fórmula:
adetermina el patrón de repetición (por ejemplo, cada 2º, 3º hijo, etc.);bestablece el punto de inicio o desplazamiento para la selección;nactúa como el contador que se incrementa en cada iteración, comenzando en 0.
Veamos algunos selectores típicos.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Nota
No es necesario memorizar todos los selectores. Siempre podemos buscarlos en Google.
:not()
La pseudo-clase :not() selecciona los elementos que no coinciden con un selector especificado. Por ejemplo, :not(p) seleccionaría todos los elementos excepto los elementos <p>. Veamos algunos ejemplos:
index.html
index.css
1. ¿Qué pseudoclase se puede utilizar para seleccionar el primer elemento en un conjunto de elementos?
2. ¿Para qué se utiliza la pseudoclase nth-child?
3. ¿Cómo funciona la pseudoclase last-child?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.56Uso de Pseudoclases Estructurales y Funcionales
Desliza para mostrar el menú
Las pseudo-clases permiten seleccionar elementos de manera precisa según su posición dentro de un contenedor. A continuación, se presentan algunas de las más utilizadas.
:first-child
La pseudo-clase :first-child selecciona un elemento que es el primer hijo de su elemento padre, sin importar su etiqueta o nombre de clase. Considera el siguiente ejemplo para mayor claridad. Tenemos un conjunto de elementos y, solo para el primer elemento (el primer elemento <li>), queremos establecer su propiedad color en blue.
index.html
styles.css
Salida
Solo se seleccionó el primer elemento de preguntas frecuentes y se aplicaron estilos específicos.
:last-child
La pseudo-clase :last-child selecciona el último hijo de su elemento padre, permitiendo modificar cualquiera de sus propiedades. Consideremos un ejemplo para ilustrar cómo utilizar esta pseudo-clase de manera efectiva.
index.html
styles.css
Salida
:nth-child
La pseudo-clase :nth-child permite seleccionar elementos según su posición dentro de una lista de elementos hermanos. Se puede comenzar con una selección simple especificando un número. Por ejemplo:
index.html
styles.css
Salida
Los estilos de acento se aplicaron solo a los elementos seleccionados (2º y 3º).
Avanzado :nth-child
Para escenarios más complejos, puedes utilizar la fórmula an+b para seleccionar múltiples elementos según su posición. Así es como funciona la fórmula:
adetermina el patrón de repetición (por ejemplo, cada 2º, 3º hijo, etc.);bestablece el punto de inicio o desplazamiento para la selección;nactúa como el contador que se incrementa en cada iteración, comenzando en 0.
Veamos algunos selectores típicos.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Nota
No es necesario memorizar todos los selectores. Siempre podemos buscarlos en Google.
:not()
La pseudo-clase :not() selecciona los elementos que no coinciden con un selector especificado. Por ejemplo, :not(p) seleccionaría todos los elementos excepto los elementos <p>. Veamos algunos ejemplos:
index.html
index.css
1. ¿Qué pseudoclase se puede utilizar para seleccionar el primer elemento en un conjunto de elementos?
2. ¿Para qué se utiliza la pseudoclase nth-child?
3. ¿Cómo funciona la pseudoclase last-child?
¡Gracias por tus comentarios!
