Comprender el selector CSS :nth-child()

Como todos los selectores de CSS, puede utilizar :nth-child() para identificar elementos en una página web y aplicarles estilos. Pero este selector le permite limitar un conjunto de hermanos según su posición relativa.

El selector admite algunas palabras clave básicas para casos comunes, pero también proporciona una poderosa sintaxis de coincidencia de patrones. Al usarlo, puede seleccionar elementos basados ​​en patrones regulares y repetidos o definiciones más complejas, según sus necesidades.

La sintaxis del selector :nth-child()

Como un Selector de pseudoclase CSS, la sintaxis :nth-child() difiere de la de otros selectores. Toma un argumento como patrón para hacer coincidir elementos en un conjunto de hermanos:

:nth-child(args) {
/*...*/
}

La atención se centra principalmente en los argumentos entre paréntesis. Estos argumentos definen el subconjunto de elementos a seleccionar.

Uso de valores de palabras clave para casos comunes

Este selector puede acomodar dos valores de palabras clave: extraño y incluso. Son particularmente útiles para diseñar filas alternativas en una tabla.

Una lista ordenada simple es otro buen ejemplo de cuándo podría utilizar estos valores de palabras clave:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Utilizando el : enésimo hijo (impar) selector, puede cambiar el color de cada elemento alternativo:

:nth-child(odd) {
color: red;
}

Los elementos comienzan en el índice 1, por lo que el primer elemento aparecerá en rojo, luego el tercero, y así sucesivamente:

Notación funcional para mayor flexibilidad

Puede utilizar un único número entero para seleccionar un elemento individual, como este:

li:nth-child(4) {
color: red;
}

En este caso, el selector sólo coincide con el cuarto elemento de la lista:

Esta sintaxis es un caso especial de la sintaxis funcional más general que selecciona elementos que coinciden con un patrón determinado. Esta sintaxis es:

:nth-child(An+B) {
/*...*/
}

En esta notación, A es el tamaño del paso. Esto significa la cantidad de veces que el selector se mueve para seleccionar el siguiente elemento. Le permite seleccionar uno de cada dos elementos, uno de cada tres elementos, etc. B Es el punto de partida donde comienza la selección.

Por ejemplo, tomemos el argumento 3n+1:

li:nth-child(3n+1) {
color: red;
}

Esto iniciará la selección en el primer elemento y continuará con cada tercer elemento después de eso:

Compare esto con la expresión 3n+2:

li:nth-child(3n+2) {
color:red;
}

Esto todavía selecciona cada tercer elemento, pero ahora comienza desde el segundo elemento de la lista:

Otro ejemplo interesante es :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Éste seleccionará cada elemento (n), comenzando desde el tercero (+3). Se verá así:

También puedes utilizar la resta para lograr ciertos resultados:

li:nth-child(3n-1) {
color: red;
}

Este ejemplo todavía selecciona cada tercer elemento, pero comienza desde el "menos primero". En efecto, esto significa que seleccionará el segundo elemento de la lista, luego el quinto, y así sucesivamente:

El de Sintaxis

También puedes usar la palabra clave de seguido por un selector como argumento en el selector :nth-child(). Esta sintaxis le permite limitar los posibles elementos entre los que selecciona el patrón normal.

Por ejemplo, imagina que tu marcado es más complicado que el original:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Ahora, use :nth-child para seleccionar los elementos pares del conjunto de aquellos con una clase específica:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Observe cómo sólo los elementos pares en negrita son rojos:

Considere también en qué se diferencia esto de li.new: enésimo hijo (par) que apunta a elementos nuevos, pero sólo si son pares. Estos serían los elementos 2 y 6 en el ejemplo anterior.

Trabajar con el selector :nth-child()

Puede lograr diseños únicos utilizando el selector :nth-child(). Puede crear sitios web coloridos y resaltar filas y columnas en tablas de datos. Combinarlo con otros selectores de CSS te ayudará a crear diseños y diseños complejos.