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

Question

У меня есть следующий 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, а не братья и сестры родителей.

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

Answer 1

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

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

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

Answer 2

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