CSS: come selezionare il fratello genitore

Question

Ho il seguente codice HTML nella mia pagina.

<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> 

Non riesco a modificare questo codice HTML. Ho nascosto tutti i LI con l'eccezione del primo usando il seguente CSS

ul#detailsList li:nth-child(1n+2) { 
    display:none; 
} 

Fin qui tutto bene. Quello che voglio fare ora è mostrare quei LI nascosti quando la casella di controllo è spuntata, usando puro CSS. Il mio miglior tentativo finora è

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

Ovviamente questo non funziona, come il + li selezionerà solo immediatamente dopo la casella di controllo (cioè fratelli) di LI, non fratelli della controllante.

È possibile?

Answer 1

Non si può fare che con i CSS ma

Puoi provare a utilizzare jQuery

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

Answer 2

Non è possibile farlo con il solo CSS, è necessario utilizzare javascript per questo. Come hai bisogno di prendere l'evento di cambiamento della casella di controllo.