JSFiddle - React, Tailwind, and code Playground

by kuyabiye

HTML

<ul class="tabMenu">
  <li class="hidden">1</li>
  <li class="active">3</li>
  <li class="hidden">1</li>
  <li class="active">3</li>
  <li class="hidden">1</li>
  <li class="hidden">1</li>
  <li class="hidden">1</li>
  <li class="active">2</li>
  <li class="active">3</li>
  <li>4</li> <!-- I want this one's blood -->
  <li class="hidden">5</li>
  <li class="hidden">6</li>
  <li>7</li>
</ul>

CSS

li:not(.hidden) {  
    color: red;
}

li:not(.hidden) ~ li {
    color: inherit;
}