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

子要素に基づいた親要素のスタイル設定

特定の子の存在に基づいて適用される要素の CSS スタイルを定義できます。要素。これは、:has() 疑似クラスを使用して実現されます。

例

次の HTML を考えてみましょう:

<div>
  <div class="a"></div>
</div>

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

子に基づいて親 div をスタイルするには、 :has() 疑似クラスを使用します:

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

最初の div にはクラス「a」の子 div が含まれているため、赤い枠線で表示されます。 2 番目の div には、クラス "b" の子 div が含まれているため、青い枠線が表示されます。

注: :has() 疑似クラスが使用される前は、この動作は次のとおりでした。 JavaScript を使用して実現されます。

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