[Solved] css nth-child() check board pattern [closed]

by


This is pretty simple, as the pattern is repeated over 2 rows of 4, you just need to apply styles to 8n + i for the chequered pattern:

.flex {
  display: flex;
  width: 400px;        /* width of four squares */
  flex-direction: row;
  flex-wrap: wrap;
}

.square {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-sizing: border-box;
}

.square:nth-child(8n+1),
.square:nth-child(8n+3),
.square:nth-child(8n+6),
.square:nth-child(8n+8) {
    background:black;
}
.square:nth-child(8n+2),
.square:nth-child(8n+4),
.square:nth-child(8n+5),
.square:nth-child(8n+7) {
    background:white;
}
<div class="flex">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

solved css nth-child() check board pattern [closed]