JSFiddle - React, Tailwind, and code Playground

by Luca Detomi

HTML

<div class="container">
  <a href="#!" class="toggle">Toggle</a>
  <ul class="list">
    <li><a href="#!">Link 1</a></li>
    <li>
      <div class="container">
        <a href="#!" class="toggle">SubToggle</a>
        <ul class="list">
          <li><a href="#!">SubLink 1</a></li>
          <li>
            <a href="#!">SubLink 2</a>
          </li>
          <li><a href="#!">SubLink 3</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#!">Link 3</a></li>
  </ul>
</div>

CSS

.toggle {
  color: red;
}

:not(.list) .toggle {
  font-weight:bold;
}