Seleccione cada N-ésimo elemento en CSS



Answers

div:nth-child(4n+4) 

Ver: http://css-tricks.com/how-nth-child-works/

Question

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

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




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;
}
<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 cuarto niño comenzando desde 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 3 ° y 4 ° 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 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>




Related