0

When a child of a parent has a condition(checked) target the parent sibling.

I tried the following code but it is not working, because it goes after the child sibling:

.content {
  top:      0px;
  width:      75%;
  max-width: 300px;
  background: $white;
  z-index: 10;
  box-shadow: 5px 0 5px 0 rgba(0,0,0,.1);
  padding-top: 20px;
   transition: all 0.2s ease-in-out;
  }


.toggle > input[type='checkbox']:checked ~ .content:first-of-type{
  border: 1px solid red;
}
<div class="toggle">
  <input type="checkbox" id="toggle">
  <i>dsaosame cicon and text</>
</div>

<div class="content">
  <ul>
    <li>aaa</li>
    <li>dsadsads</li>
   </ul>
</div>
<div class="content">
  <ul>
    <li>aaa</li>
    <li>dsadsads</li>
   </ul>
</div>
user3541631
  • 3,102
  • 5
  • 30
  • 75
  • This will not work as CSS does not have the ability to traverse back up the DOM tree. You would either have to use JavaScript or amend the DOM layout. – Ginger CSS Wizard Feb 13 '19 at 12:32
  • not sure why repeating the same question:https://stackoverflow.com/questions/54669723/show-hide-elements-based-on-a-checkbox-input-state .. the duplicate is the same, what is not clear there? you can still edit and ping the duplicate closer – Temani Afif Feb 13 '19 at 12:40

0 Answers0