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?

CSS does not allow you to select parent elements. Only sibling and child elements are supported. — Diodeus - James MacFarlane, Jun 11 '13 at 15:57

score 15 · Accepted Answer · edited Dec 07 '22 at 13:26

15

You can use has():

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

~~You cannot do that with CSS but~~

You can try using jQuery

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

edited Dec 07 '22 at 13:26

Mikael Dúi Bolinder

2,080
2
19
44

answered Jun 11 '13 at 16:00

Mohammad Areeb Siddiqui

9,795
14
71
113

That is what I figured, but thought I would ask just in case. Thanks for the advice. – Typhoon101 Jun 11 '13 at 16:10
is it possible to get a MWE with :has? I cannot seem to get it to work... – Silmathoron Jul 08 '23 at 20:07

score 2 · Answer 2 · answered Jun 11 '13 at 15:58

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.

answered Jun 11 '13 at 15:58

Sachin

40,216
7
90
102

CSS: how to select parent's sibling

2 Answers2

Linked