Seleziona ogni elemento Nth in CSS

È ansible selezionare, ad esempio, ogni quarto elemento in un insieme di elementi?

Es: Ho 16 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?

Come suggerisce il nome,: : n th-child() consente di build un’espressione aritmetica utilizzando la variabile n oltre ai numeri costanti. È ansible eseguire l’aggiunta ( + ), la sottrazione ( - ) e la moltiplicazione dei coefficienti (dove a è un numero intero, compresi i numeri positivi, i numeri negativi e zero).

Ecco come riscrivere la lista dei selettori di cui sopra:

 div:nth-child(4n) 

Per una spiegazione su come funzionano queste espressioni aritmetiche, vedere la mia risposta a questa domanda , così come le specifiche .

Si noti che questa risposta presuppone che tutti gli elementi figlio all’interno dello stesso elemento padre siano dello stesso tipo di elemento, div . Se hai altri elementi di tipi diversi come h1 o p , dovrai usare :nth-of-type() invece di :nth-child() per assicurarti di contare solo gli elementi div :

  

1
2
3
4

5
6
7
8

9
10
11
12

13
14
15
16

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


A proposito, non c’è molta differenza tra 4n e 4n + 4 riguardo a :nth-child() . Se si utilizza la variabile n , inizia il conteggio a 0. Questo è ciò che corrisponderà 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.

 div:nth-child(4n+4) 

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

Prova questo

 div:nth-child(4n+4) 

Hai bisogno dell’argomento corretto per la pseudo-class nth-child .

  • L’argomento dovrebbe essere nella forma di an + b per abbinare ogni bambino a partire da b.

  • Sia a che b sono numeri interi opzionali ed entrambi possono essere zero o negativi.

    • Se a è zero, non esiste una clausola “ogni a th th .
    • Se a è negativo, la corrispondenza viene fatta a ritroso a partire da b .
    • Se b è zero o negativo, allora è ansible scrivere espressioni equivalenti usando il positivo b esempio 4n+0 è uguale a 4n+4 . Allo stesso modo 4n-1 è uguale a 4n+3 .

Esempi:

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