CSS を使用して、子のコンテンツに基づいて親要素のスタイルを設定するにはどうすればよいですか?

CSS を使用した子コンテンツに基づくターゲット要素

子要素に基づいて親要素に独自の CSS スタイルを適用する必要が生じる場合があります。それらには含まれています。従来の CSS セレクターは特定の要素をターゲットにすることに重点を置いていますが、:has() セレクターを使用して条件付きスタイルを実現する方法があります。

:has() の構文は次のとおりです:

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

この構文を使用すると、特定の子要素を含む div 要素にスタイルを適用できます。たとえば、上記のルールでは、クラス「a」の子を含む div 要素に赤い境界線が追加され、クラス「b」の子が含まれる div 要素に青い境界線が追加されます。

Example :

<style>
  div:has(div.a) {
    border: solid 3px red;
  }
  div:has(div.b) {
    border: solid 3px blue;
  }
</style>
<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

このコードでは、子要素に対応する 2 つの div 要素が生成されます。1 つは赤い境界線、もう 1 つは青い境界線が付いています。 contains.

注: :has() セレクターは最新のブラウザーで広くサポートされていますが、古いブラウザーでは動作しない可能性があります。

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