JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<div>
    <h2>Sibling Tests</h2>
    <a class="toggleid">show the one with id</a>
    <br />
    <a class="toggleall">show all (1,2,3)</a>
    <div class="content">this is the content #1</div>
    <br />
    <a class="toggle-next">show next (2)</a>
    <div class="content">this is the content #2</div>
    <br />
    <a class="toggle-next">show next (3)</a>
    <div class="content">this is the content #3</div>
    
    <div class="content" id="withid">this is the content #4 (<strong>with id</strong>)
</div>
<div class="nesting">
    <h2> nesting Tests </h2>
    <div class="nest-next">immediate children only
        <div class="nest-all">all descendants
            <div> depth 3
                <div> depth 4
                    <div> depth 5
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>

CSS

.toggleall ~ .content{display:none;}
.toggleall:hover ~ .content{display:block;}
.toggle-next:hover + .content{display:block;}
.toggleid:hover ~ #withid{display:block;}

.nesting div{padding-left:5px;}
.nesting div div {display:none;}
.nesting .nest-next:hover > div{display:block;}
.nesting .nest-all:hover *{display:block;}