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 14 · Accepted Answer · answered Jun 11 '13 at 16:00

14

You cannot do that with CSS but

You can try using jQuery

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

answered Jun 11 '13 at 16:00

Mohammad Areeb Siddiqui

9,485
13
67
111

That is what I figured, but thought I would ask just in case. Thanks for the advice. – Typhoon101 Jun 11 '13 at 16:10

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

3

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

39,043
7
86
102

CSS: how to select parent's sibling

2 Answers2

Linked