nth-child every eight (8)

I need to repeat a pattern every eight elements like this using nth-child.

■□■□

□■□■

I've been trying to figure out a formula for this but I don't seem to get it right.

section {
  width: 220px;
}
div {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: yellow;
}

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

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

nth-child every eight (8)

2 Answers