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

CSS セレクター: 特定の子要素を持つ要素をターゲットにする

CSS は子要素に基づいて要素を選択できますか?特定のフレームワークでは可能ですが、純粋な CSS に対する答えは現時点では否定的です。

CSS2 および CSS3 の制限

既存の CSS2 および CSS3 仕様には、親セレクターのメカニズムがありません。これは、セレクターが子要素に基づいて要素を直接ターゲットにすることができないことを意味します。

進化する仕様

親セレクターの問題は、さまざまな問題で長年議論されてきました。提案された解決策。過去の提案の 1 つは、「サブジェクト」の概念を導入し、セレクター チェーン内の要素を対象としたスタイル設定を可能にしました。ただし、この機能は後に削除されました。

最近の開発: :has() 疑似クラス

最新の「Selectors Level 4 Editor's Draft」では、「:has」が導入されています。 ()」リレーショナル疑似クラス。この疑似クラスを使用すると、作成者は子に基づいて要素を選択できます。たとえば、スパンを含むすべての段落を選択するには、

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

現在のステータス

を使用できます。ただし、「:」に注意することが重要です。 has()" 疑似クラスはまだドラフト段階にあり、さらに変更される可能性があります。そのため、現在のブラウザでは広くサポートされていない可能性があります。

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