Seleccione cada enésimo elemento en CSS

242

¿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?

css css-selectors Derek Adair
fuente
1
Espero que todos sigan vivos, solo para novatos y no tan novatos, incluso seleccione una cantidad cada n elementos y cosas más difíciles: nthmaster.com
gengns

Respuestas:

419

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

Así es como reescribiría la lista de selección 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 de un mismo elemento padre son del mismo tipo de elemento, div. Si tiene otros elementos de diferentes tipos, como h1o p, deberá usarlos en :nth-of-type()lugar de :nth-child()para asegurarse de contar solo divelementos:

<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, no podrá hacer esto con un selector 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 nvariable, 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 los anteriores. En este caso, no hay diferencia.

BoltClock
fuente
Solo pensé que agregaría, si estás haciendo algo como solo el cuarto, entonces necesitarías algo como tr td:nth-child(4). Tenga en cuenta la falta de n entre paréntesis
WORMSS
2
tenga en cuenta: esto solo funciona en los selectores de elementos (div, td, img, etc.), no en el selector de clase como
.this
1
Creé una demostración interactiva para explicar visualmente cómo funciona nth-child (n): xengravity.com/demo/nth-child . Encontré que la especificación w3 es particularmente desalentadora para principiantes en los que se permite la sintaxis; específicamente su sección 'escáner léxico'.
xengravity
1
@xengravity: ¡Gracias por compartir! Estoy de acuerdo, la gramática no es amigable para principiantes ya que fue escrita teniendo en cuenta a los implementadores y no a los autores. La especificación proporciona varios ejemplos de cómo escribir la sintaxis, pero sin elementos visuales.
BoltClock
1
He creado una herramienta similar para jugar con expresiones nth-child: salman-w.googlecode.com/svn/trunk/css/…
Salman A
12

Prueba esto

div:nth-child(4n+4)
Marko
fuente
10

Necesita el argumento correcto para la nth-childpseudo clase.

  • El argumento debe tener la forma de an + bhacer coincidir cada uno de los hijos a partir de b.

  • Ambos ay bson enteros opcionales y ambos pueden ser cero o negativos.

    • Si aes cero, entonces no hay una cláusula "cada uno de los hijos" .
    • Si aes negativo, la coincidencia se realiza hacia atrás a partir de b.
    • Si bes cero o negativo, entonces es posible escribir una expresión equivalente usando positivo, bpor ejemplo, 4n+0es igual que 4n+4. Del 4n-1mismo modo 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>
Expandir fragmento

Seleccione cada cuarto niño a partir de 1 (1, 5, 9, ...)

Mostrar fragmento de código

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

Mostrar fragmento de código

Seleccione los primeros 4 elementos (4, 3, 2, 1)

Mostrar fragmento de código

Salman A
fuente