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>