CSS Change parent style when check checkbox

Question

I've checked lots of questions and now I'm here.

So, I want to customize my checkbox like that. My target is to change parent class when checkbox is checked. Parent class is .sf-level-0 .

Thats my unsucessful try:

.sf-input-checkbox[type="checkbox"]:checked+li.sf-level-0 {
  background: red;
}

<ul>
  <li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="2" data-sf-depth="0">
    <input class="sf-input-checkbox" type="checkbox" value="action" name="_sft_category[]">
    <label class="sf-label-checkbox">Action</label>
  </li>
  <li class="sf-level-0 sf-item-31" data-sf-count="2" data-sf-depth="0">
    <input class="sf-input-checkbox" type="checkbox" value="crime" name="_sft_category[]">
    <label class="sf-label-checkbox">Crime</label>
  </li>
  <li class="sf-level-0 sf-item-77 sf-option-active" data-sf-count="1" data-sf-depth="0">
    <input class="sf-input-checkbox" type="checkbox" value="drama" name="_sft_category[]">
    <label class="sf-label-checkbox">Drama</label>
  </li>
  <li class="sf-level-0 sf-item-29" data-sf-count="1" data-sf-depth="0">
    <input class="sf-input-checkbox" type="checkbox" value="thriller" name="_sft_category[]">
    <label class=" sf-label-checkbox ">Thriller</label>
  </li>
</ul>

sadly, CSS doesn't have a "parent selector", so you can't do what you want using only CSS... — Calvin Nunes, Feb 12 '20 at 18:02
inputs checked could only style sibbling labels after them here, you have to put them in the flow of the element you want to style — G-Cyrillus, Feb 12 '20 at 18:42
**If its a fact that there is no parent selector, the duplicate is of no help here ...** — G-Cyrillus, Feb 12 '20 at 18:45
here is a possible workaround : https://codepen.io/gc-nomade/pen/JjdYZeW — G-Cyrillus, Feb 12 '20 at 18:49

CSS Change parent style when check checkbox

0 Answers0