CSS は子要素に基づいて親要素を選択できますか?

答え:

残念ながら、CSS2 および CSS3 の仕様には、子のコンテンツに基づいて親要素を選択する機能がありません。親セレクターは現在サポートされていません。

仕様の更新に関する注意:

この情報は、CSS 仕様の継続的な議論と変更により古くなる可能性があります。この回答を正確に保つためにあらゆる努力をしますが、不正確な情報が含まれる可能性があります。

CSS ドラフトでの親セレクターの探索:

初期の「セレクター レベル 4 ワーキング ドラフト」 「セレクター サブジェクト」の概念を導入し、作成者がスタイルを受け取る要素を指定できるようにしました。ただし、この機能は将来の仕様から削除され、使用できなくなります。

「Selectors Level 4 Editor's Draft」の :has() 擬似クラス:

より最近の「Selectors Level 4 Editor's Draft」には、:has() リレーショナル疑似クラスが含まれています。この構造により、内容に基づいて要素を選択できます。 :has() を使用すると、上の例は次のようになります。

p:has(span) {
    color: red;
}

このセレクターはすべての

を選択します。 を含む要素子供。