JSFiddle - React, Tailwind, and code Playground

HTML

<style>
    
</style>
<div>&lt;div&gt;<br/>
    <span>&lt;div&gt;&lt;div&gt;</span><br/>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;&lt;/span&gt;</span><br/>
    <span>&lt;span&gt;&lt;/span&gt;</span><br/>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<br/>      
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;&lt;/span&gt;</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;        
    </p>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;&lt;/div&gt;</div>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;&lt;/span&gt;</span><br/>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;/p&gt;</p>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;&lt;/span&gt;</span><br/>
    &lt;/div&gt;
</div>
<br/><br/>
<button id='decendent'>Decendent: div span</button>
<button id='child'>Child: div > span</button>
<button id='adjustment'>Adjustment div + span</button>
<button id='general'>General Siblings div ~ span</button>

JavaScript

$(function () {
    $('#decendent').click(function () {
        $('div span').css('border', '2px solid red');
    });
    $('#child').click(function () {
        $('div > span').css('border', '2px solid blue');
    });
    $('#adjustment').click(function () {
        $('div + span').css('border', '2px solid black'); 
    });
    $('#general').click(function () {
        $('div ~ span').css('border', '2px solid pink');
    });
});