JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<div class="wrap">
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box hidden">I'm hidden</div>
  <div class="box hidden">I'm hidden</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
</div>

CSS

.box {
  background: orange;
}

.box:nth-child(even) {
  background: green;
}

.box.hidden + .box:nth-child(even) {
  background: orange;
}

.box.hidden + .box.hidden {
  background: gray;
}