'Css style to a before-placed sibling when checkbox is checked

Hi I am trying to affect a CSS style to a span (or to the label just beside) that is placed before my checkbox, once the checkbox is checked my span must have the style transform:rotate(45deg); I know there is no 'before sibling' selector in CSS, How could I fix that ?

HTML

<div class="cont">
   <label class="tableToggle has-text-primary" for="cb1">
      <span class="fa-stack fa-1x"><i class="fas fa-circle fa-stack-2x"></i> <i 
class="fa fa-ellipsis-h fa-stack-1x fa-inverse" style="--fa-inverse:var(--fa-navy);"></i></span>
  </label>

<input id="cb1" type="checkbox" checked="checked" data-keeper-edited="yes">
<table border="0" class="dataframe table">
  <thead>
    <tr style="text-align: center;">
     <th>version</th>
   </tr>
 </thead>
<tbody>
<tr>
  <td>1</td>
</tr>
...
 </tbody>
</table>
</div>

CSS

.tableToggle + input[type="checkbox"]:checked + table>tbody>tr:nth-child(n+4) {
 /* display: none; */
 color:red
 }

.tableToggle + input[type="checkbox"]:checked ~ span{
 /* display: none; */
 transform:rotate(45deg);
}
htmlcss


Solution 1:[1]

As one of the options: use display: flex and use the order property to rearrange the elements in the order you need. Example below:

.cont {
  display: flex;
}

.cont #cb1 {
  order: 2
}

label {
  order: 1;
}

input[type="checkbox"]:checked ~ .tableToggle > span {
 /* display: none; */
 transform:rotate(45deg);
}
<div class="cont">
  <input id="cb1" type="checkbox" data-keeper-edited="yes">
  <label class="tableToggle has-text-primary" for="cb1">
      <span class="fa-stack fa-1x"><i class="fas fa-circle fa-stack-2x"></i> <i 
class="fa fa-ellipsis-h fa-stack-1x fa-inverse" style="--fa-inverse:var(--fa-navy);"></i>toggle</span>
  </label>


  <table border="0" class="dataframe table">
    <thead>
      <tr style="text-align: center;">
        <th>version</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

The example shows that in the HTML structure input comes before label (with a nested span), but visually input is shown after label because label has order: 1 and input has order: 2;. Because of this - we can use standard CSS rules using "+" and "~" operators.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions