На моей странице есть следующий 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 сразу после флажка (т.е. братьев и сестер), а не братьев и сестер родителя.
Возможно ли это?