Thursday, May 31, 2018

css3 - CSS: how to select parent's sibling

I have the following HTML in my page.









  • content ...

  • content ...

  • content ...

  • content ...

  • content ...





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?

No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...