CSS: how to select parent's sibling

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 can use :has():

ul#detailsList:has(> li > input#showCheckbox:checked) > li {
    display: block;
}

Please note, though, that browser support for :has() is not very good yet.

---

You cannot do that with CSS but

You can try using jQuery

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