1

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

  1. both elements touched by the CSS are under the triggering element.
  2. 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>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • If your question is related to these rather specific examples you have given, and the (text) (checkbox) (text) form is what you actually want to get working here - then you can put the elements in (checkbox) (text) (text) order in the DOM, and change the _visual_ order via flexbox ... – CBroe Mar 21 '22 at 12:02

1 Answers1

1

It's the same issue as with a parent selector, CSS can only see DOWN the DOM not back up. As in it can only see future siblings, children, children of children etc.

Safari I think has implemented the :has() pseudo class in one of their dev versions but they are a small browser and Chrome has yet to implement anything.

You might get duped as a few questions on here, this is probably a useful one: Is there a CSS parent selector?

Kevin Powell has a great video https://www.youtube.com/watch?v=2-xdcDsqsAs

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
  • 1
    Thanks Zach for answer. Apparently also this question has been asked for a very long time :-) Your link is from 2009. – Maik Lowrey Mar 19 '22 at 13:01
  • 1
    Great video and i learn something. Merci for sharing the Link. – Maik Lowrey Mar 19 '22 at 20:02
  • @MaikLowrey Thought it might help you as the answers haven't even changed much since then sadly. I'm not sure what else to mention in my answer that could help you – Zach Jensz Mar 19 '22 at 23:53