JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bob">
<p class="first">
Bobs första
</p>
<p class="second">
Bobs andra
</p>
<div class="second">
Bobs andra andra
</div>
<p class="third">
Bobs tredje
</p>
<p class="fourth">
Bobs fjärde
</p>
</div>
<div id="simon">
<p class="first">
Simons första
</p>
<p class="second">
Simons andra
</p>
<p class="third">
Simons tredje
</p>
<p class="fourth">
Simons fjärde
</p>
</div>

CSS

#bob > .second {
  font-weight: bold;
}

#bob p.second {
  text-decoration: underline;
}

#bob > .second + p + p {
  color: red;
}