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: 
You can do it something like this: **[nth-type-of-selector](https://css-tricks.com/almanac/selectors/n/nth-of-type/)**

```
li:nth-of-type(8n+5),
li:nth-of-type(8n+6),
li:nth-of-type(8n+7),
li:nth-of-type(8n+8) {
    background-color:blue;
}

li:nth-of-type(8n+1),
li:nth-of-type(8n+2),
li:nth-of-type(8n+3),
li:nth-of-type(8n+4) {
    background-color:red;
}

```

---

Run the below snippet , Hope that clear your doubts

```css
ul{
  list-style-type: none;
}
li:nth-of-type(8n+5),
li:nth-of-type(8n+6),
li:nth-of-type(8n+7),
li:nth-of-type(8n+8) {
    background-color:green;
}

li:nth-of-type(8n+1),
li:nth-of-type(8n+2),
li:nth-of-type(8n+3),
li:nth-of-type(8n+4) {
    background-color:red;
}
```

```html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul
```
You can wrap 4 div within one parent div.

And apply css based on alternate parent div.