Sibling Selector Test
by Fiddel
HTML
OK:
<input type="text" class="toggle" placeholder="focus me"></input>
<span class="button"></span>
<hr><!--
Problem :
<div>
<input type="text" class="toggle" placeholder="focus me"></input>
</div>
<span class="button"></span> -->CSS
span, input {display:inline-block; height:1em; margin:1em;}
span {background-color:pink; border:1px solid red;}
.button {display:none;}
.toggle:focus ~ .button {display:block;}
hr {margin:2em 0;}