Weta

# Revisión del selector :nth-child()

El selector :nth-child() es una pseudo-clase de CSS que te permite seleccionar elementos hijos basándote en su posición dentro de la lista de hijos de sus padres. Con este selector, puedes aplicar estilos a elementos específicos dentro de una estructura de HTML.

El selector :nth-child() toma un argumento, que puede ser una palabra clave o una notación funcional, para establecer un patrón de selección. Algunas de las palabras clave comunes son “odd” (impares) y “even” (pares), que seleccionan los elementos en posiciones impar o par respectivamente. También puedes utilizar la notación funcional “An+B” para seleccionar elementos que cumplan con un patrón específico.

Aquí tienes algunos ejemplos de uso del selector :nth-child():

– tr:nth-child(odd) o tr:nth-child(2n+1): Esto seleccionará las filas impares de una tabla HTML.
– tr:nth-child(even) o tr:nth-child(2n): Esto seleccionará las filas pares de una tabla HTML.
– :nth-child(7): Esto seleccionará el séptimo elemento.
– :nth-child(5n): Esto seleccionará elementos en las posiciones 5, 10, 15, etc.
– :nth-child(n+7): Esto seleccionará el séptimo elemento y todos los siguientes.
– :nth-child(3n+4): Esto seleccionará elementos en las posiciones 4, 7, 10, 13, etc.
– :nth-child(-n+3): Esto seleccionará los primeros tres elementos.

El selector :nth-child() también se puede combinar con otros selectores para aplicar estilos más específicos. Por ejemplo, puedes usar el selector :nth-child() en combinación con el selector :not() para seleccionar los elementos que cumplan con ciertos criterios, pero que no tengan otro selector específico.

Recuerda que el selector :nth-child() tiene en cuenta la posición real de los elementos dentro de la lista de hijos, no su estructura en el HTML. Esto significa que si hay otros elementos que no cumplan los criterios del selector en medio de la lista, no serán seleccionados.

En conclusión, el selector :nth-child() es una herramienta útil para seleccionar y estilizar elementos específicos en una lista de hijos. Puedes utilizar palabras clave y notación funcional para establecer patrones de selección personalizados. Explora las posibilidades y saca el máximo provecho de este selector en tus estilos CSS.