I have a small CSS/ SCSS problem I need to solve. I HTML structure to which I have to write some small SCSS to match a given style, an example is in the below snippet.

The snippet I made should render items in the 1st level blue (active links green) and all items in 2nd and deeper levels red (they come with a given style already, which also applies to the first level I need to change).

As I see it, the problem is the nav:not(:has(ul ul)) selector which somehow doesn’t select anything. I wanted to achieve that it selects all a tags which are not in a nav ul ul structure (therefore the selector to match the nav except a submenu).

What’s the error, and how can I solve it?

nav:not(:has(ul ul)) {
  a {
    color: #0000ff;
  }
  a.active {
    color: #00ff00;
  }
}

a {
  color: #ff0000;
}

<nav>
  <ul>
    <li> <a href="#" class="active">active link item</a> </li>
    <li>
      <a href="#">other link item</a>
      <ul>
        <li> <a href="#">sub item 1</a> </li>
        <li> <a href="#">another sub item</a> </li>
        <li> <a href="#">more sub items</a> </li>
        <li> <a href="#">last item</a> </li>
      </ul>
    </li>
  </ul>
</nav>