Quick nth-child issue

Question

Ho un problema rapido :nth-child che non riesco a risolvere. Sto mirando a indirizzare ogni 3 ° e 4 ° elemento in un gruppo di 4 elementi che formano un elenco.

Ad esempio:

<div class="normal">Item 1</div> 
<div class="normal">Item 2</div> 
<div class="different">Item 3</div> 
<div class="different">Item 4</div> 
<div class="normal">Item 5</div> 
<div class="normal">Item 6</div> 
<div class="different">Item 7</div> 
<div class="different">Item 8</div> 

In questo esempio vorrei indirizzare tutte le istanze di <div class="different"> - ho usato un sacco di generatori nth-child a venire con una risposta, ma niente mi arriva a ciò che di cui ho bisogno.

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Utilizzare div:nth-child(4n-1), div:nth-child(4n). La logica è semplice: desideri selezionare gli articoli nei gruppi di quattro, quindi 4n sarebbe il comune denominatore. Dal momento che si desidera selezionare il penultimo e gli ultimi elementi del gruppo, rispettivamente 4n-1 e 4n farebbero il lavoro.

Come segue è un semplice diagramma che illustra il mio punto:

#1 
#2 
#3 <- 4th item - 1 
#4 <- 4th item 
#5 
#6 
#7 <- 4th item -1 
#8 <- 4th item 

div:nth-child(4n-1), div:nth-child(4n) { 
 
    background-color: #eee; 
 
}

<div class="normal">Item 1</div> 
 
<div class="normal">Item 2</div> 
 
<div class="different">Item 3</div> 
 
<div class="different">Item 4</div> 
 
<div class="normal">Item 5</div> 
 
<div class="normal">Item 6</div> 
 
<div class="different">Item 7</div> 
 
<div class="different">Item 8</div>