Changing CSS with the checkbox check [duplicate] - html

Question

This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 3 years ago.
I tried many ways to change the color of the border of my image when the checkbox is checked and I didn't find a solution. I start wondering if it's possible.
.thumbs {
list-style:none;
margin:0;
padding:0.3em 0;
text-align:center;
color:#fff;
}
.thumbs li {
position:relative;
display:inline-block;
margin:0.2em;
border:0.30em solid #000000 ;
border-radius:0.3em;
}
.thumbs li:hover { border-color: #59b359; }
input[type=checkbox]:checked + .thumbs li { border-color: #ff0000; }
<form id="formdelete">
<ul class="thumbs">
<li class="img">
<label for="SNAP_CH01.jpg">
<img src="SNAP_CH01.jpg" title="CH1">
<input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg">
</li>
<li class="img">
<label for="SNAP_CH02.jpg">
<img src="SNAP_CH02.jpg" title="CH2">
</label>
<input type="checkbox" name="todelete[]" value="SNAP_CH02" id="SNAP_CH02.jpg">
</li>
<li class="img">
<label for="SNAP_CH03.jpg">
<img src="SNAP_CH03.jpg" title="CH3">
</label>
<input type="checkbox" name="todelete[]" value="SNAP_CH03" id="SNAP_CH03.jpg">
</li>
</form>
The border should be red when the checkbox is checked
EDIT :
I find a solution using the link :
I have to change the order of the checkbox but it's work fine :
<ul class="thumbs">
<li class="img">
<input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg">
<label for="SNAP_CH01.jpg">
<img src="SNAP_CH01.jpg" title="CH1">
</label>
</li>
label > img {
display: block;
border: 3px solid #000000 ;
}
input[type=checkbox]:checked + label > img { border: 3px #FF0000 solid ;}

Answer 1

So, the adjacent sibling selector + https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator will target the element immediately AFTER the element being referenced.
In your code, input[type=checkbox]:checked + .thumbs li it is looking for a class for thumbs immediately after the checkbox. In this case, .thumbs is the name of the (grand) parent UL item.
The most important letter in CSS is the C -- Cascading. The styles move down the DOM tree, you will need creative ways to affect something above.