JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<section>
  <div class="foo" id="baz">aaaaaaaaaaaaaaa</div>
  <div class="foo">bbbbbbbbbbbbbbbb</div>
</section>
<section>
  <div class="hui" id="buh">ccccccccc</div>
  <div class="hui">ddddddddddd</div>
</section>
<section>
  <div class="oof" id="ugh">eeeeeeeeee</div>
  <div class="oof">fffffffff</div>
</section>
<section>
  <div class="zip" id="rar">gggggggggggg</div>
  <div class="zip">hhhhhhhhhhhhhhhhh</div>
</section>

CSS

section { margin: 1em; }
.foo#baz#baz#baz { color: green; }
.foo:not(#bar#bar) { color: red;}
.foo { color: blue;}

.hui#buh#buh { color: green; }
.hui:not(#muh#muh) { color: red;}
.hui { color: blue;}

.oof#ugh#ugh#ugh { color: green; }
.oof:not(#ook):not(#ook) { color: red;}
.oof { color: blue;}

.zip#rar#rar { color: green; }
.zip:not(#lzh):not(#lzh) { color: red;}
.zip { color: blue;}