JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"><p>bla</p><p>blabla</p><p>hyita</p><em>e,mmmmmmmmmmmmmmm</em></div>

<div id="test2"><p>bla</p><p>blabla</p><p>hyita</p><em>e,mmmmmmmmmmmmmmm</em></div>
<hr>
<div class="test3"><p>bla</p><p>blabla</p><p>hyita</p><em>e,mmmmmmmmmmmmmmm</em></div>
<div class="test3"><p>bla</p><p>blabla</p><p>hyita</p><em>e,mmmmmmmmmmmmmmm</em></div>

CSS

#test:first-child
{
    background: red;
}

#test2:hover
{
     background: red;   
}

.test3
{
    color: green;
}

.test3:first-child
{
    background: red;
}