JSFiddle - React, Tailwind, and code Playground

by victoriaytsu

HTML

<div class="a" id="a1">
  <div class="g">
    <div class="b" id="b2">
      Blue
      <div class="b" id="b3">
        Red
      </div>
    </div>
  </div>
  <div class="h" id="h1">
    Black
  </div>
</div>

CSS

.b {
  color: rgb(255, 0, 0); /* red */
}
.a .g>.b {
  color: rgb(0, 0, 0); /* black */
}
.a :matches(.g>.b, .h) {
  color: rgb(0, 0, 255); /* blue */
}
.g>.b {
  color: rgb(0, 0, 0); /* black */
}
.a .h {
  color: rgb(0, 0, 0); /* black */
}