JSFiddle - React, Tailwind, and code Playground

HTML

<div>
Using space
</div>
<div>
<div class="class1" id="A1">A1:highlight</div>
<div class="class2">
  <div class="class1" id="B1">B1:don't highlight</div>
</div>
<div>
  <div class="class1" id="A2">A2:highlight</div>
  <div class="class2">
    <div class="class1" id="B2">B2:don't highlight</div>
    <div>
      <div class="class1" id="B3">B3:don't highlight</div>
    </div>
  </div>
</div>

</div>
<br><br>
<div>
Using &gt;
</div>

<div>
<div class="class1B" id="A1">A1:highlight</div>
<div class="class2B">
  <div class="class1B" id="B1">B1:don't highlight</div>
</div>
<div>
  <div class="class1B" id="A2">A2:highlight</div>
  <div class="class2B">
    <div class="class1B" id="B2">B2:don't highlight</div>
    <div>
      <div class="class1B" id="B3">B3:don't highlight</div>
    </div>
  </div>
</div>

</div>

CSS

:not(.class2) .class1 {
    background-color: #00ff00;
}

:not(.class2B) > .class1B {
    background-color: #00ff00;
}