CSS: wie Eltern Geschwister auswählen

Question

Ich habe den folgenden HTML in meiner Seite.

<ul id="detailsList"> 
    <li> 
     <input type="checkbox" id="showCheckbox" /> 
     <label for="showCheckbox">Show Details</label> 
    </li> 
    <li>content ...</li> 
    <li>content ...</li> 
    <li>content ...</li> 
    <li>content ...</li> 
    <li>content ...</li> 
</ul> 

Ich kann diesen HTML nicht ändern. Ich habe alle LI mit Ausnahme der ersten unter Verwendung der folgenden CSS versteckt

So weit so gut. Ich möchte nun die versteckten LI's anzeigen, wenn das Kontrollkästchen aktiviert ist und reines CSS verwendet. Mein bester Versuch so weit ist

ul#detailsList li input#showCheckbox:checked + li { 
    display:block; 
} 

Offensichtlich ist dies nicht funktioniert, wie die + li nur sofort die LI wählen wird nach der Checkbox (das heißt Geschwister), nicht Geschwister der Eltern.

Ist das überhaupt möglich?

Answer 1

Sie können nicht mit CSS tun, dass aber

können Sie versuchen, mit jQuery

$("#showCheckbox").click(function(){ 
    $(this).parent().siblings().show(); 
}); 

Answer 2

Sie können es nicht mit CSS allein tun, müssen Sie dafür javascript verwenden. Da Sie das Änderungsereignis des Kontrollkästchens abfangen müssen.