CSS Selector Tests

Show case sibling and descendant selectors for the question at http://stackoverflow.com/questions/6189064/what-is-the-simplest-way-to-implement-pure-css-show-hide

by Gabriele Petrioli

HTML

<div>
    <h2>Sibling Tests</h2>
    <a class="toggleid">show the one with id (#4)</a>
    <br />
    <a class="toggleall">show all (#1,#2,#3,#4)</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

.content{color:red;}

.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;}


.nesting .nest-all{color:red}
.nesting .nest-all div{color:green}