css3 - CSS: how to select parent's sibling

I have the following HTML in my
page.

            

 

            Show Details

            
 
content ...
 
content
            ...
 
content ...
 
content
            ...
 
content
            ...

I
am unable to change this HTML. I have hidden all LI's with the exception of the first by
using the following CSS

ul#detailsList li:nth-child(1n+2) {

            display:none;
}

So
far so good. What I want to do now is to show those hidden LI's when the the checkbox is
ticked, using pure CSS. My best attempt so far is

class="lang-css prettyprint-override">ul#detailsList li
input#showCheckbox:checked + li {

display:block;
}


Obviously
this doesn't work, as the + li will only select LI's
immediately after the checkbox (i.e. siblings), not siblings of the
parent.

Is this even
possible?

itemprop="text">

class="normal">Answer

You cannot
do that with CSS but

You can try using
jQuery

$("#showCheckbox").click(function(){

            $(this).parent().siblings().show();
});