When the .checked class exists, I need to insert the text-decoration: line-through; style into the .todo-name
(I never understood if it could be done with css, but in case I could also use js as a last chance)
<label class="checkbox-container" for="0"><span class="todo-name">Todo</span>
<input onclick="updateStatus(this)" type="checkbox" id="0" checked="">
<span class="checkmark checked"></span>
</label>
<!--This content does not have .checked and should not change-->
<label class="checkbox-container" for="0"><span class="todo-name">Todo</span>
<input onclick="updateStatus(this)" type="checkbox" id="0">
<span class="checkmark"></span>
</label>
<style>
/*.todo-name{text-decoration: line-through;}*/
/*Not working*/
/*
.checkbox-container .checked ~ .todo-name {
text-decoration: line-through;
}
.checkbox-container:not(.checked) .todo-name {text-decoration: line-through;}
*/
</style>
Codepen Project
The final result should be like this
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You have encountered several problems. As mentioned in the comments, if you don't want to use JavaScript, you should use pseudo-classes.
:is checked in this example.Next, you'll use the CSS selector
~, which selects sibling elements after this element rather than before it. So trying to select.todo-nameusing the selector#0:checked ~ .todo-namewill not work because the name appears before the checkbox.Below is an example of a working version.
input:checked ~ .todo-name { text-decoration: line-through; }