Seleccione cada Enésimo elemento en CSS

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

Ej: tengo 16 <div> elementos... 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?

Author: BoltClock, 2010-08-11
Source

4 answers

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

Así es como reescribirías la lista de selectores anterior: 

div:nth-child(4n)

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

Tenga en cuenta que esta respuesta asume 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() en lugar de :nth-child() para asegurarse de que solo cuenta div elementos: 

<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 enésimo hijo que coincide con un selector arbitrario, usted no será capaz de hacer esto con un selector CSS puro. Ver mi respuesta a esta pregunta .

Por cierto, no hay mucha diferencia entre 4n y 4n + 4 con respecto a :nth-child(). Si utiliza la variable n, comienza a contar en 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.

 378
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 10:31:14
 24
Author: Tomalak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-25 17:07:03

Prueba esto 

div:nth-child(4n+4)
 12
Author: Marko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-25 17:43:00

Necesita el argumento correcto para el nth-child pseudo clase.

  • El argumento debe ser en la forma de an + b para que coincida con cada a th hijo a partir de b.

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

    • Si a es cero entonces no hay "cada th hijo" cláusula.
    • Si a es negativo, la coincidencia se realiza hacia atrás a partir de b.
    • Si b es cero o negativo, entonces es posible escribir una expresión equivalente usando b positivo, por ejemplo, 4n+0 es lo mismo que 4n+4. Del mismo modo 4n-1 es lo mismo que 4n+3.

Ejemplos:

Seleccione cada 4to hijo (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 3er y 4to hijo 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 elementos (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>
 8
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-26 08:32:42