置き換えるときの注意点

• :has()の中に:has()は書けません。
• :has()の中に疑似要素（::beforeなど）は書けません。
• :has()の中のセレクターが1つでも無効だと、:has()全体が無効になります。 書き間違いや未対応のセレクターを混ぜると、ルールごと効かなくなります。
• :has()は、子孫の状態が変わるたびに判定し直されます。 body:has(...)のように広い範囲を対象にすると判定の範囲も広がるため、できるだけ近い親要素に絞ります。

フォールバック

対象の5ブラウザはすべて対応済みなので、通常は古い書き方を残す必要はありません。 古いブラウザも支える必要がある場合は、以前の書き方のCSSと今の書き方のCSSを、別々のルールとして両方残します。 1つのセレクターリストにまとめると、:has()に対応していないブラウザではルール全体が無視されます。 JavaScriptは、:has()に対応していないブラウザでだけ動かします。

// :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)
  }
}