JSFiddle - React, Tailwind, and code Playground

lynda.com CSS #2 - nth-child

by totoromaum

HTML

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

CSS

.wrapper {
  overflow: hidden;
}
.box {
  width: 20px;
  height: 20px;
  border: 1px solid red;
  float: left;
  text-align: center;
  padding: 20px;
}
.box:nth-child(3n+2){
  background: lightblue;
}