radio and :checked

dabblet.css

/* radio and :checked*/
div  div {display:none;padding:1em;margin:1em;border:solid;overflow:hidden;min-height:4em;}
:checked[id="aI"] ~ div #l0,
:checked[id="bI"] ~ div #l1,
:checked[id="cI"] ~ div #l2,
:checked[id="dI"] ~ div #l3,
:checked[id="eI"] ~ div #l4
 {display:block;}
:checked[id="aI"] ~ ul label[for="aI"],
:checked[id="bI"] ~ ul label[for="bI"],
:checked[id="cI"] ~ ul label[for="cI"],
:checked[id="dI"] ~ ul label[for="dI"],
:checked[id="eI"] ~ ul label[for="eI"]
 {display:block;background:orange}
 ul {float:left;margin:0 1em;}
 [type="radio"] {display:none;}

dabblet.html

<input type="radio" name="test" id="aI" />
<input type="radio" name="test" id="bI" />
<input type="radio" name="test" id="cI" />
<input type="radio" name="test" id="dI" />
<input type="radio" name="test" id="eI" />
<h1>Old browsers do not like me !</h1><ul>
	<li><label  for="aI">lien 0 </label></li>
	<li><label  for="bI">lien 1 </label></li>
	<li><label  for="cI">lien 2 </label></li>
	<li><label  for="dI">lien 3 </label></li>
	<li><label  for="eI">lien 4 </label></li>
</ul>
<div>
	 <div id="l0"> show me A</div>
	 <div id="l1"> show me B</div>
	 <div id="l2"> show me C</div>
	 <div id="l3"> show me D</div>
	 <div id="l4"> show me E</div>
 </div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}