How to apply css style from successive classes-CodePudding

I need, when the .checked class is present, to insert text-decoration: line-through; style to .todo-name

(I never understood if it is possible to do it with css, but in case I can also use js as a last chance)

<label  for="0"><span >Todo</span>
    <input onclick="updateStatus(this)" type="checkbox" id="0" checked="">
    <span ></span>
</label>

<!--This content does not have .checked and should not change-->
<label  for="0"><span >Todo</span>
    <input onclick="updateStatus(this)" type="checkbox" id="0">
    <span ></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>

CodePudding user response：

You've got a couple issues going on here. As mentioned in a comment, you should be using a pseudo-class, if you don't want to use JavaScript. :checked in this example.

Next, you are using the CSS selector ~, which selects a sibling that comes after the element, not before. So trying to select .todo-name with the selector #0:checked ~ .todo-name will not work due to the name coming before the checkbox.

Below is an example of a working version.

input:checked ~ .todo-name {
    text-decoration: line-through;  
}

<label  for="checkbox">
    <input type="checkbox" id="checkbox" checked="">
    <span >Todo</span>
</label>

<label  for="checkbox2">
    <input type="checkbox" id="checkbox2">
    <span >Todo</span>
</label>