Referring to this Stackover question from 2009 (Is there a "previous sibling" selector?), it seems that it was not possible then.
Here are two small examples that illustrate the problem
- both elements touched by the CSS are under the triggering element.
- In example two one Element is above the triggering element and the other remains below it. As a result, the sibling selector does not affect the element on top.
Example one
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="" id="nocheck">ENABLE</div>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
Example 2
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<div class="" id="nocheck">ENABLE</div>
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>