type selectors selectores nth last hijos child css css3 css-selectors

selectors - selector de hijos css



Selecciona cada elemento Nth en CSS (4)

¿Es posible seleccionar, digamos, cada cuarto elemento en un conjunto de elementos?

Ej: tengo 16 elementos <div> ... podría escribir algo así.

div:nth-child(4), div:nth-child(8), div:nth-child(12), div:nth-child(16)

¿Hay una mejor manera de hacer esto?


Como su nombre lo indica : n th-child() permite construir una expresión aritmética usando la variable n además de los números constantes. Puede realizar la suma ( + ), la resta ( - ) y la multiplicación de coeficientes (donde a es un entero, incluidos números positivos, números negativos y cero).

Así es como reescribirías la lista del selector anterior:

div:nth-child(4n)

Para obtener una explicación sobre cómo funcionan estas expresiones aritméticas, vea mi respuesta a esta pregunta , así como la spec .

Tenga en cuenta que esta respuesta asume que todos los elementos secundarios dentro del mismo elemento principal son del mismo tipo de elemento, div . Si tiene otros elementos de diferentes tipos, como h1 o p , necesitará usar :nth-of-type() lugar de :nth-child() para asegurarse de que solo cuenta los elementos div :

<body> <h1></h1> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <h2></h2> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <h2></h2> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <h2></h2> <div>13</div> <div>14</div> <div>15</div> <div>16</div> </body>

Para todo lo demás (clases, atributos o cualquier combinación de estos), donde está buscando el n º hijo que coincide con un selector arbitrario, no podrá hacer esto con un selector de CSS puro. Vea mi respuesta a esta pregunta .

Por cierto, no hay mucha diferencia entre 4n y 4n + 4 con respecto a :nth-child() . Si usa la variable n , comienza a contar a 0. Esto es lo que cada selector coincidiría:

:nth-child(4n)

4(0) = 0 4(1) = 4 4(2) = 8 4(3) = 12 4(4) = 16 ...

:nth-child(4n+4)

4(0) + 4 = 0 + 4 = 4 4(1) + 4 = 4 + 4 = 8 4(2) + 4 = 8 + 4 = 12 4(3) + 4 = 12 + 4 = 16 4(4) + 4 = 16 + 4 = 20 ...

Como puede ver, ambos selectores coincidirán con los mismos elementos que arriba. En este caso, no hay diferencia.


Necesitas el argumento correcto para la pseudo clase nth-child .

  • El argumento debe tener la forma de an + b para que coincida con cada uno de los niños a partir de b.

  • Tanto a como b son enteros opcionales y ambos pueden ser cero o negativos.

    • Si a es cero, entonces no hay una cláusula de "cada niño" .
    • Si a es negativo, el emparejamiento se realiza al revés comenzando desde b .
    • Si b es cero o negativo, entonces es posible escribir una expresión equivalente usando b positiva, b ejemplo, 4n+0 es igual que 4n+4 . Del mismo modo, 4n-1 es igual que 4n+3 .

Ejemplos:

Seleccione cada 4to niño (4, 8, 12, ...)

li:nth-child(4n) { background: yellow; }

<ol> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ol>

Seleccione cada 4to hijo a partir de 1 (1, 5, 9, ...)

li:nth-child(4n+1) { background: yellow; }

<ol> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ol>

Seleccione cada 3ro y 4to niño de grupos de 4 (3 y 4, 7 y 8, 11 y 12, ...)

/* two selectors are required */ li:nth-child(4n+3), li:nth-child(4n+4) { background: yellow; }

<ol> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ol>

Seleccione los primeros 4 artículos (4, 3, 2, 1)

/* when a is negative then matching is done backwards */ li:nth-child(-n+4) { background: yellow; }

<ol> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ol>


Prueba esto

div:nth-child(4n+4)