JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p class="t1">Heading 1</p>
  <div class="override">
    <p class="p1">Sub heading 1</p>
    <p class="p2">Sub heading 1</p>
  </div>
</div>

CSS

::selection {
  background: #c6c6c6;
}
:not([class^=p])::selection {
  color: #000;
}
.t1 {
  color: blue;
}
.p1 {
  color: red;
}
.p2 {
  color: green;
}