CSS checking if input is checked and chaining elements-CodePudding

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" >
    <div >
        <div >

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

        </div>
    </div>
    <div >
        <div >
            <div  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  id="5starpercentage"><strong>{{ $scoreInfo['percent_5_star'] }}%</strong></div>
</label>

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

CodePudding user response：

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.

CodePudding user response：

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');
        }
    }
});