0

So I keep reading that there is no parent selector in css (which is a bit weird).
Does this mean I'm not able to change the background on .fake-checkbox when the checkbox is checked using only css?

The code looks like this:

  <div class="checkbox">
    <span class="fake-checkbox" id="chkbx">
      <input type="checkbox" />
      <svg class="svg svg-icon" viewBox="0 0 20 20">
        <path d="M7.97832489 13.4912738 3.56842362 9.01683836 2 10.6248752 8.17428734 17 18 4.49099934 16.1436545 3z"></path>
      </svg>
    </span>
    <label for="chkbx">Recurring object</label>
  </div>

See code in Codepen.

Ideal selector would be:

input:checked < span { background-color: green; }
Steven
  • 18,168
  • 44
  • 141
  • 240
  • You can't, check [this question](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Cristian Traìna Nov 08 '19 at 13:27
  • input needs to be outside and before the parent if you want to use CSS. label can used to create a visual of your checkbox in this case , using a pseudo selector – G-Cyrillus Nov 08 '19 at 13:38
  • @G-Cyr If you are reffereing the the questions Christian is linking to, that question is over 10 years old. I was hoping CSS selectors had come a bit further since then. – Steven Nov 08 '19 at 13:47
  • unfortunately, not, it was once the idea that a parent selector would come avalaible, but idea was dropped. best is to relay on javascript to make it crossbrowser. At best (or worse ?) there is https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within – G-Cyrillus Nov 08 '19 at 13:48
  • *sight* Now I understand why everyon is wrapping it in the label tag. Alright, thanks :) – Steven Nov 08 '19 at 13:52

0 Answers0