Things to watch when replacing

• :has() cannot be nested inside another :has().
• Pseudo-elements (such as ::before) cannot be used inside :has().
• If any selector inside :has() is invalid, the whole :has() is invalid. A typo or an unsupported selector makes the entire rule stop working.
• :has() is re-evaluated whenever its descendants change. Anchoring it on a broad element such as body:has(...) widens what has to be checked, so keep it on the closest parent you can.

Fallback

All five target browsers support it, so you normally don’t need to keep the old technique. If you also have to support older browsers, keep both the legacy CSS and the modern CSS as separate rules. Combining them into one selector list makes browsers without :has() ignore the whole rule. Run the JavaScript only in browsers that don’t support :has().

// Add the legacy class only in browsers that don't support :has()
if (!CSS.supports('selector(:has(*))')) {
  const checkboxes = document.querySelectorAll('tr input[type="checkbox"]')
  for (const checkbox of checkboxes) {
    const row = checkbox.closest('tr')
    const update = () => row.classList.toggle('is-checked', checkbox.checked)
    update()
    checkbox.addEventListener('change', update)
  }
}