CSS :has()
「親セレクタ」。要素を、その中身に基づいて選択できる。article:has(img)は画像を含む記事に一致する。
2023年以降、主要なブラウザすべてで安定している（Chrome 105、Safari 15.4、Firefox 121）。内側にはどんなセレクタも書ける。li:has(> a.active)、form:has(input:invalid)、:has(+ p)など。山のようなJavaScriptの小細工が不要になり、クラスを付け外しせずにフォームのスタイルを整えることが現実的になった。
性能も意外に良く、ブラウザが賢く無効化を処理してくれる。唯一の難点は、「親は子のことを知らない」という従来の発想を捨てなければならないことくらいだ。