JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="type01">
  <li class="on">menu01</li>
  <li class="on">menu02</li>
  <li>menu03</li>
  <li>menu04</li>
</ul>

<ul class="type01">
  <li>menu01</li>
  <li>menu02</li>
  <li>menu03</li>
  <li>menu04</li>
</ul>

<h2>:has() </h2>

<ul class="type02">
  <li class="on">menu01</li>
  <li class="on">menu02</li>
  <li>menu03</li>
  <li>menu04</li>
</ul>

<ul class="type02">
  <li>menu01</li>
  <li>menu02</li>
  <li>menu03</li>
  <li>menu04</li>
</ul>

CSS

.type01 li:not(.on) {
  background: red;
}


.type02:has(.on) li:not(.on) {
  background: red;
}