JSFiddle - React, Tailwind, and code Playground

by Felipe Miosso

HTML

<div id="container">
    <hey>
        <haha>
           <div class="paragraph">Yellow</div>
           <hey>
               <haha>
                   <div class="title" title="Yellow"></div>
                </haha>
           </hey>
        </haha>
    </hey>
    <div class="title">blue</div>
    <hey>
        <haha>
           <div class="title">Yellow</div>
        </haha>
    </hey>
    <foo>
        <div class="title">Title 1</div>
        <hey>
        <haha>
           <div class="title">Yellow</div>
        </haha>
    </hey>
    </foo>
    <foo>
        <div class="title">Title 1</div>
    </foo>
    <bar>
        <div class="title">Title 2</div>
    </bar>
</div>

CSS

#container .title:first-child {
    color:blue;
    position:relative;
}

#container .title:first-child:after {
    content: attr(title);
    color:blue;
}

#container * + * .title:first-child {
    color:red;
}

#container * + * .title:first-child:after {
    
}