JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target">
  Target
  <div class="special">
    Special child of target
  </div>
</div>
<div>
  Unspecial sibling
  <div>
    Unspecial child of a sibling
  </div>
  <div class="special">
    Special child of a sibling
  </div>
</div>
<div class="special">
  Special sibling
</div>

CSS

#target {
  display: inline-block;
  border: 1px solid blue;
}

#target:hover .special,
#target:hover~.special,
#target:hover~* .special {
  color: red;
}

div {
  margin: 5px 0;
}

div>div {
  margin-left: 15px;
}