:nth-child y :nth-of-type
Seleccione elementos por su posición dentro de un elemento padre mediante fórmulas nth y selectores de tipo.
:nth-child y :nth-of-type es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué son las pseudoclases estructurales?
Las pseudoclases estructurales seleccionan elementos según su posición dentro de su elemento padre. Eliminan la necesidad de añadir clases o JavaScript para dirigirse a elementos secundarios específicos.
:first-child y :last-child
Seleccione el primer o el último elemento secundario de un elemento padre:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
Conceptos básicos de :nth-child()
:nth-child(n) selecciona elementos según su posición (indexada desde 1) entre elementos hermanos de cualquier tipo.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() con palabras clave
Utilice las palabras clave odd o even para aplicar estilos alternos a las filas:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() con fórmulas
Utilice la fórmula An+B, donde A es el paso y B es el desplazamiento. n comienza en 0 y aumenta progresivamente.
3n— cada tercer elemento (3, 6, 9...)3n+1— el primero de cada grupo de tres (1, 4, 7...)-n+3— solo los tres primeros elementos
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() cuenta únicamente los elementos hermanos del mismo tipo de elemento e ignora los demás. Esto es importante cuando se combinan distintos tipos de elementos.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type y :last-of-type
Seleccione el primer o el último elemento de un tipo de etiqueta específico entre sus hermanos:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child frente a :nth-of-type
Diferencia clave:
p:nth-child(2)— selecciona el segundo elemento secundario SI es un<p>p:nth-of-type(2)— selecciona el segundo<p>independientemente de los demás elementos
:only-child y :only-of-type
:only-child selecciona un elemento que es el único elemento secundario de su elemento padre. :only-of-type selecciona un elemento que es el único de su tipo dentro de su elemento padre.
<div><p>I'm the only child in this div.</p></div>
:nth-child con selector of S (moderno)
El CSS moderno permite filtrar los elementos que cuenta la fórmula nth mediante :nth-child(An+B of selector):
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Práctica: espacio de cuadrícula en la última fila
Elimine el margen inferior del último elemento visible:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Comprobación rápida
¿Qué selector se dirige a cada tercer elemento de una lista empezando por el primero?
Repaso
:nth-child() cuenta todos los elementos hermanos según su posición; :nth-of-type() cuenta únicamente los elementos hermanos de la misma etiqueta. Utilice odd/even para crear tablas con filas alternas. La fórmula An+B permite crear patrones potentes, como "cada tercer elemento" o "los cinco primeros", sin añadir clases.
Preguntas frecuentes
¿La lección «:nth-child y :nth-of-type» es gratis?
Sí — el texto completo de «:nth-child y :nth-of-type» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «:nth-child y :nth-of-type»?
Seleccione elementos por su posición dentro de un elemento padre mediante fórmulas nth y selectores de tipo. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «:nth-child y :nth-of-type»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- :hover :focus :active y :visited
- :nth-child y :nth-of-type
- :not(), :is() y :where()
- :checked, :disabled y pseudoclases de estado de formularios