Hızlı çocuk oyunu

Question

Çözmeyi zorlaştırdığım bir :nth-child numaralı sorunu giderdim. Bir liste oluşturan 4 öğenin bir gruplandırmasında her 3. ve 4. maddeyi hedeflemeyi hedefliyorum.

Örneğin

: Bu örnekte

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

Ben <div class="different"> tüm örneklerini hedeflemek istediğiniz - ı bir cevap ile gelip n'inci-çocuk jeneratörler çok kullandım ama hiçbir şey beni alır neye ihtiyacım var.

Herhangi bir yardım çok takdir edilecektir!

Answer 1

div:nth-child(4n-1), div:nth-child(4n)'u kullanın. Mantık basittir - dört'un grubundaki öğeleri seçmek istediğinizde, 4n ortak payda olacaktır. Sondaki öğeleri ve gruptaki son öğeleri seçmek istediğinizden, 4n-1 ve 4n sırasıyla işi yapar. Onlar üst div içinde bulunan

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