Quick nth-child issue

Question

I've a quick :nth-child issue that I'm struggling to solve. I'm aiming to target every 3rd and 4th item in a grouping of 4 items that form a list.

For example:

<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 this example I'd like to target all instances of <div class="different"> - i've used a lot of nth-child generators to come up with an answer but nothing gets me to what I need.

Any help would be much appreciated!

Answer 1

Use div:nth-child(4n-1), div:nth-child(4n). The logic is simple — you want to select items in groups of four, so 4n would be the common denominator. Since you want to select the penultimate and the last items in the group, 4n-1 and 4n respectively would do the job.

As follow is a simple diagram illustrating my point:

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