Question: I have scss file that changes color using nth-child when its odd or even.

```
.e-schedule .e-timeline-month-view .e-work-cells {
  border-bottom: 0px solid $midnight-blue !important;
  &.border-custom {
    border-bottom: 2px solid $midnight-blue !important;
  }
  &:nth-child(odd) {
    background: $bg-gray;
  }
  &:nth-child(even) {
    background: $white;
    &:hover {
      background: $white; // may remove after event CRUD ops
    }
  }
}

```

What i need is change background-color after 4th multiple (4,8,12 ...)

1,2,3,4 - white

5,6,7,8 - grey

9,10,11,12 - white

13,14,15,16 - grey

...etc

Something like above. Can someone help with this? Is their a way to do this using nth-child? or do i need something else. I'm using Reactjs + SCSS.

**Note: I cant change the div structure as i'm using 3rd party lib. I can only override styles.**

Answer: 
Using the structure you have provided, the solution with SCSS is:

```
.e-schedule .e-timeline-month-view .e-work-cells{
  &:nth-child(8n+1), &:nth-child(8n+2), &:nth-child(8n+3), &:nth-child(8n+4){
    background-color: white;
  }
  &:nth-child(8n+5), &:nth-child(8n+6), &:nth-child(8n+7), &:nth-child(8n+8){
    background-color: grey;
  }
}

```

With the number multiplied by n you control the extension of the group. In this case the group has eight positions. Then, you control the position within the group adding a number to n, i.e: 8n+1 selects the first item of each group of 8 items.

You can apply the same group of styles to different items selecting the required elements with a comma: `&:nth-child(8n+1), &:nth-child(8n+3)` This applies the same group of styles to the first and third items of the group for each group of 8 items.
You can wrap 4 div within one parent div.

And apply css based on alternate parent div.