Pseudoclases estructurales
Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 12 de 43.
Las pseudo-clases estructurales en CSS se utilizan para dar estilo a los elementos basándose en su posición o estructura dentro del documento HTML. Permiten seleccionar elementos como el primer hijo, el último hijo o hijos numerados específicos sin necesidad de clases o IDs adicionales.
Ejemplos comunes incluyen:
:first-child— selecciona el primer hijo de un elemento padre.
:last-child— selecciona el último hijo de un padre.:nth-child(n)— selecciona el n-ésimo hijo (por ejemplo, cada 2.º, 3.º, etc.).
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Hoja de referencia
Las pseudoclases estructurales aplican estilos a los elementos basándose en su posición dentro del documento HTML:
:first-child— selecciona el primer hijo de un elemento padre:last-child— selecciona el último hijo de un elemento padre:nth-child(n)— selecciona el n-ésimo hijo (por ejemplo, cada segundo, tercero, etc.)
Pruébalo tú mismo
Esta lección no incluye un desafío de código.
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de CSS Mastery
1Dominio de selectores – Combinación
IntroducciónSelector de descendienteSelector de hijoSelector de hermano adyacenteSelector de hermano generalDesafío de repaso2Pseudoclases interactivas
PseudoclasesEfectos de hoverEfectos de focusEstilos de estado activoDesafío de repaso3Pseudoclases estructurales
Pseudoclases estructuralesSeleccionando el primer hijoSeleccionando el último hijoEl poder de los patrones: Usando nth-childDesafío de repaso