CSS: как выбрать родителя

На моей странице есть следующий HTML-код.

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

Я не могу изменить этот HTML. Я скрыл все LI, за исключением первого, используя следующий CSS

ul#detailsList li:nth-child(1n+2) {
    display:none;
}

Все идет нормально. Теперь я хочу показать скрытые LI, когда галочка отмечена галочкой, используя чистый CSS. Моя лучшая попытка до сих пор

ul#detailsList li input#showCheckbox:checked + li {
    display:block;
}

Очевидно, это не работает, так как + li будет выбирать только LI сразу после флажка (т.е. братьев и сестер), а не братьев и сестер родителя.

Возможно ли это?

Ответ 1

Вы не можете сделать это с помощью CSS, но

Вы можете попробовать использовать jQuery

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

Ответ 2

Вы не можете сделать это только с помощью CSS, для этого вам нужно использовать javascript. Поскольку вам нужно поймать событие изменения флажка.