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

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

質問:特定の子要素を持つすべての要素を選択しますか?たとえば、すべての

を選択するには、 を含む要素element?

答え:

残念ながら、CSS2 および CSS3 セレクターの仕様では親の選択が許可されていません。これは、子要素に基づいて要素をネイティブに選択できないことを意味します。

最近の開発:

ただし、CSS セレクターの仕様は最近変更されました。以前の「セレクター レベル 4 ワーキング ドラフト」には、スタイルを受け取る要素を選択するための「サブジェクト」機能が含まれていましたが、この機能は後続のドラフトでは削除されました。

リレーショナル疑似クラス: :has( )

より最近の「Selectors Level 4 Editor's Draft」には「:has()」リレーショナルが含まれています擬似クラス。作成者は内容に基づいて要素を選択できます。これにより、jQuery のカスタム ":has()" 擬似セレクターとの互換性が提供されます。

":has()" を使用すると、前述の例は次のように記述できます。

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

このセレクターは、すべて選択

を含む要素要素を追加し、赤色でスタイルを設定します。このソリューションはすべてのブラウザで均一にサポートされているわけではないことに注意することが重要です。

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