JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td id="left">
      <div class="parent">
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
      </div>
    </td>
    <td id="right">
      <div class="parent">
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
        <div class="child">child</div>
      </div>
    </td>
  </tr>
</table>

CSS

table tr td#left div.parent div.child:nth-child(3n) {
  background-color: yellow;
}

table tr td#left div.parent div.child:nth-child(2n) {
  background-color: white;
}

table tr td#right div.parent div.child:nth-child(2n) {
  background-color: white;
}

table tr td#right div.parent div.child:nth-child(3n) {
  background-color: yellow;
}