HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS :has() Checked List Item</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 1.5rem;
    }

    ul {
      list-style: none;
      padding: 0;
      max-width: 18rem;
    }

    li {
      padding: 0.4rem 0;
      font-size: 0.9375rem;
    }

    li:has(input:checked) {
      text-decoration: line-through;
      color: #94a3b8;
    }

    input {
      margin-right: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <ul>
    <li><input type="checkbox" checked> Buy groceries</li>
    <li><input type="checkbox"> Walk the dog</li>
    <li><input type="checkbox"> Read a book</li>
  </ul>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS :has() Selector - Checked Todo Item