'CSS checking if input is checked and chaining elements

I cannot make this work, guys. The problem is I no longer have idea how to (try to) make it work.

#5starcheckbox:checked+label[for="5starcheckbox"]>.col-lg-10>.progress>.progress-bar {
  opacity: 1 !important;
}

input#5starcheckbox:checked+span#5starpercentage {
  color: #0060df !important;
}
<label for="5starcheckbox" class="row filterlabel">
    <div class="col-lg-1 col-1">
        <div class="checkboxes text-end">

                <input type="checkbox" id="5starcheckbox" name="stars[]" value="5">
                <span class="checkmark"></span>

        </div>
    </div>
    <div class="col-lg-10 col-9 pt-1">
        <div class="progress">
            <div class="progress-bar progress5" role="progressbar" style="width: {{ $scoreInfo['percent_5_star'] }}%;opacity:0.6;" aria-valuenow="{{ $scoreInfo['percent_5_star'] }}" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
    <div class="col-lg-1 col-2 text-end text-secondary" id="5starpercentage"><strong>{{ $scoreInfo['percent_5_star'] }}%</strong></div>
</label>

Is there something wrong in my code? Why it isn't working?

htmlcss


Solution 1:[1]

The problem is, that your label encloses your input. The CSS selector + (in your case #5starcheckbox:checked + label[for="5starcheckbox"]) matches the followin sibling, if the selector matches it. So, #5starcheckbox:checked + label[for="5starcheckbox"] only matches the label in the following code:

<input type="checkbox" name="5starcheckbox" id="5starcheckbox">
<label for="5starcheckbox"></label>

There isn't a parent selector in CSS.

Solution 2:[2]

I resorted to jQuery to do this.

$("#form").on('change', function() {
    for(i = 1; i <= 5; i++) {
        checkbox = $("#" + i + "starcheckbox");
        checked = checkbox.is(":checked");
        if(checked == true) {
            $("#" + i + "starpercentage").removeClass('text-secondary').addClass('text-primary');
            $(".progress" + i).css('opacity', '1.0');
        } else {
            $("#" + i + "starpercentage").removeClass('text-primary').addClass('text-secondary');
            $(".progress" + i).css('opacity', '0.4');
        }
    }
});

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 Apollo79
Solution 2 John Furgeson

Related Questions