Seleccione cada N-ésimo elemento en CSS

¿Es posible seleccionar, por ejemplo, cada cuarto elemento de un conjunto de elementos?

Ejemplo: tengo 16 elementos

… podría escribir algo como.

 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 sum ( + ), resta ( - ) y multiplicación de coeficiente ( an donde a es un número entero, incluidos números positivos, números negativos y cero).

A continuación, le mostramos cómo reescribiría la lista de selectores anterior:

 div:nth-child(4n) 

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

Tenga en cuenta que esta respuesta supone que todos los elementos secundarios dentro del mismo elemento padre 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 cuente los elementos div :

  

1
2
3
4

5
6
7
8

9
10
11
12

13
14
15
16

Para todo lo demás (clases, atributos o cualquier combinación de estos), donde busca el enésimo niño 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 en 0. Esto es lo que coincidiría con cada selector:

: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.

Prueba esto

 div:nth-child(4n+4) 

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

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

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

    • Si a es cero, entonces no hay una cláusula de “cada uno” .
    • Si a es negativo, la coincidencia se realiza al revés a partir de b .
    • Si b es cero o negativo, entonces es posible escribir expresiones equivalentes usando b positivo, b ejemplo, 4n+0 es lo mismo que 4n+4 . Del mismo modo 4n-1 es lo mismo que 4n+3 .

Ejemplos:

Seleccione cada cuarto niño (4, 8, 12, …)

 li:nth-child(4n) { background: yellow; } 
 
  1. Item
  2. Item
  3. Item
  4. Item
  5. Item
  6. Item
  7. Item
  8. Item
  9. Item