CSS で子要素に基づいて親要素のスタイルを設定するにはどうすればよいですか?

CSS の子要素に基づいて要素をスタイル設定する

Web ページをデザインするとき、子要素に基づいて要素をスタイル設定すると便利です。含む。 CSS には現在、この要件に直接対処するための「:containing」擬似クラスがありませんが、代替ソリューションである「:has」擬似クラスが利用可能です。

「:has」擬似クラスの使用クラス:

「:has」擬似クラスを使用すると、要素に特定の要素が含まれる場合にのみスタイルを適用できます。子要素。 ":has" の構文は次のとおりです:

div:has(child-element) {
  styles
}

使用例:

":has" 疑似クラスを使用すると、次のスタイルを定義できます。親要素は、それに含まれる子要素に基づいて作成されます。例:

div:has(div.a) {
  border: solid 3px red;
}

div:has(div.b) {
  border: solid 3px blue;
}

このコードでは、最初のルールは、クラス「a」の子要素を含むすべての「div」要素をターゲットにし、それに赤い境界線を追加します。同様に、2 番目のルールは、クラス「b」の子要素を含む「div」要素に青い境界線を適用します。

結論:

while the ": contains" 疑似クラスは CSS に存在しません。":has" 疑似クラスは、子要素に基づいて親要素にスタイルを適用するための実行可能な代替手段を提供します。 「:has」を活用することで、開発者は CSS スタイルの柔軟性と表現力を強化できます。

以上がCSS で子要素に基づいて親要素のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。