CSS: how to select parent's sibling [duplicate]

Question

I have the following HTML in my page.

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

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

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?

Answer 1

You cannot do that with CSS but

You can try using jQuery

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

Answer 2

You can't do it with CSS alone, you need to use javascript for this. As You need to catch the change event of the checkbox.