JSFiddle - React, Tailwind, and code Playground

HTML

<div> <!-- control group | green -->
    Green<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
</div> <!-- /control group | green -->
<div class="red">
  <div class="blue">
    Blue<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div> <!-- /blue -->
  <div>
    Red<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div>
</div> <!-- /red -->

CSS

body>div,body>div>div{margin-bottom:1rem}


a{color:green}
.blue a{color:blue}
.red :not(.blue) a{color:red}