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

特定の子を持つ要素の CSS セレクター

この質問では、特定の子要素の存在に基づいて要素を選択する可能性を検討します。

現在の CSS 制限:

現在の CSS 仕様(CSS2 および CSS3)、親の選択を実行する組み込み機能はありません。これは、要素に特定の子要素が含まれている場合、要素を直接選択できないことを意味します。

過去の取り組みと提案:

CSS 仕様の古い草案には、セレクターの概念が含まれていました。これにより、子に基づいて親要素を選択できるようになります。ただし、この機能は削除されており、現在の CSS 実装には存在しません。

新機能:

セレクター レベル 4 などの CSS 仕様の最新のドラフト編集者のドラフトでは、「:has()」リレーショナル擬似クラスの概念を導入します。 「:has()」は、その内容に基づいて要素を選択する手段を提供します。

「:has()」を使用した子要素を持つ要素の選択:

Toを使用して、特定の子要素を含む親要素を選択します":has()":

parent-element:has(child-element) {
  /* styling goes here */
}

例:

すべてを選択する場合

を含む要素child:

div:has(span) {
  /* styling goes here */
}

「:has()」はまだ開発中であり、すべてのブラウザで完全にサポートされているわけではないことに注意してください。

以上がCSS は子要素に基づいて親を選択できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。