Seleziona ogni n elemento in CSS

242

È possibile selezionare, per esempio, ogni quarto elemento in un insieme di elementi?

Es: ho 16 <div>elementi ... Potrei scrivere qualcosa del genere.

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

c'è un modo migliore per farlo?

css css-selectors

— Derek Adair
fonte

1

Spero che tutti siano ancora vivi, solo per i principianti e non per i neofiti, anche selezionare una quantità ogni n elementi e cose più difficili: nthmaster.com

— gengns

419

Come suggerisce il nome, ti permette di costruire un'espressione aritmetica usando la variabile oltre ai numeri costanti. È possibile eseguire addizioni ( ), sottrazioni ( ) e moltiplicazioni di coefficienti ( dove è un numero intero, inclusi numeri positivi, numeri negativi e zero).:nth-child()n+-ana

Ecco come riscrivere l'elenco di selettori sopra:

div:nth-child(4n)

Per una spiegazione sul funzionamento di queste espressioni aritmetiche, vedere la mia risposta a questa domanda , nonché le specifiche .

Si noti che questa risposta presuppone che tutti gli elementi figlio all'interno dello stesso elemento genitore sono dello stesso tipo di elemento, div. Se hai altri elementi di tipi diversi come h1o p, dovrai utilizzare :nth-of-type()invece di :nth-child()assicurarti di contare solo gli divelementi:

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

Per tutto il resto (classi, attributi o qualsiasi combinazione di questi), dove stai cercando l'ennesimo figlio che corrisponde a un selettore arbitrario, non sarai in grado di farlo con un selettore CSS puro. Vedi la mia risposta a questa domanda .

A proposito, non c'è molta differenza tra 4n e 4n + 4 per quanto riguarda :nth-child(). Se usi la nvariabile, inizia a contare da 0. Ecco cosa corrisponde a ciascun selettore:

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

Come puoi vedere, entrambi i selettori corrisponderanno agli stessi elementi di cui sopra. In questo caso, non c'è differenza.

— BoltClock
fonte

Ho solo pensato di aggiungere, se stai facendo qualcosa come solo il quarto, allora avresti bisogno di qualcosa come tr td:nth-child(4). Nota la mancanza di n tra parentesi

— WORMSS,

2

nota: funziona solo con selettori di elementi (div, td, img ecc.), non con selettori di classe come

— .this

1

Ho creato una demo interattiva per spiegare visivamente come funziona nth-child (n): xengravity.com/demo/nth-child . Ho trovato le specifiche w3 particolarmente scoraggianti per i principianti su cui è consentita la sintassi; in particolare la sezione "Scanner lessicale".

— xengravity,

1

@xengravity: grazie per averlo condiviso! Sono d'accordo, la grammatica non è adatta ai principianti in quanto è stata scritta pensando agli implementatori e non agli autori. Le specifiche forniscono una serie di esempi su come scrivere la sintassi, ma senza elementi visivi di accompagnamento.

— BoltClock

1

Ho creato uno strumento simile per giocare con le espressioni dell'ennesimo

— Salman A

24

div:nth-child(4n+4)

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

— Tomalak
fonte

12

Prova questo

div:nth-child(4n+4)

— Marko
fonte

10

È necessario l'argomento corretto per la nth-childpseudo classe.

L'argomento dovrebbe essere sotto forma di an + bad abbinare ad ogni un ^esimo bambino a partire da b.
Entrambi ae bsono numeri interi opzionali ed entrambi possono essere zero o negativi.
- Se aè zero, allora non v'è alcuna "ogni un ^esimo figlio" clausola.
- Se aè negativo, la corrispondenza viene eseguita all'indietro a partire da b.
- Se bè zero o negativo, è possibile scrivere un'espressione equivalente usando positivo, bad esempio 4n+0è uguale a 4n+4. Allo 4n-1stesso modo è lo stesso di 4n+3.

Esempi:

Seleziona ogni 4 ° figlio (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>

Espandi frammento

Seleziona ogni 4 ° figlio a partire da 1 (1, 5, 9, ...)

Mostra snippet di codice

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>

Espandi frammento

Seleziona ogni 3o e 4o figlio da gruppi di 4 (3 e 4, 7 e 8, 11 e 12, ...)

Mostra snippet di codice

/* 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>

Espandi frammento

Seleziona i primi 4 elementi (4, 3, 2, 1)

Mostra snippet di codice

/* 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>

Espandi frammento

— Salman A
fonte