:has(input:checked) not working

HTML-CSS
1

I’m trying to make a To-do list app, but I’m facing a problem styling the to-dos:

<label for="task-txt">
           asdfasdf
           <input type="checkbox">
</label>

.todo-list label:has(input:checked) {
    color: var(--active-btn-clr);
    text-decoration: line-through;
}

Why doesn’t this CSS rule work? I think the problem is related with input:checked inside :has(), but I can’t think of another solution for this because I can’t put the input outside the label because I’d need to link them but elements can’t have the same id:

<li>
   <input type="checkbox" id="task-txt">
   <label for="task-txt"></label>
</li>
<li>
   <input type="checkbox" id="task-txt">
   <label for="task-txt"></label>
</li>
2

You should use explicit checked for your checkbox:

<label>
	Running
	<input type="checkbox" checked="checked">
</label>

Then, use this selector in CSS:

label:has(input[checked="checked"]) {
    text-decoration: line-through;
}
3

Your selector works, can you show a bigger example of html, maybe including .todo-list element?

4 
<section class="todo-list">
   <ul id="todos">
      <li class="task">
         <label for="task-txt">
          text
            <input type="checkbox">
        </label>
        <button id="delete-btn"> </button>
      </li>
   </ul>
</section>

This is also the github repository just in case you want to see the whole project

5

can you also show the code with this css? maybe add a different branch

6

You can see the branches, but here’s the link:

7

you are not using :has anymore?

8

also can you describe how to reproduce the issue on the app

9

Yes I’m using it, but as one of the comments suggested. I’m using explicit checked attribute because using the :checked pseudo-class was not working

<label>
	Running
	<input type="checkbox" checked="checked">
</label>

label:has(input[checked="checked"]) {
    text-decoration: line-through;
}