CSS の子要素に基づいて親要素のスタイルを設定できますか?

CSS の子要素に基づいた要素のスタイル

要素に含まれる子要素に基づいて CSS スタイルを要素に適用することは可能ですか?

はい、CSS は、 :has() 疑似クラス。これにより、指定された子孫要素が含まれているかどうかに基づいて要素をターゲットにすることができます。

構文:

div:has(child-selector) {
  /* CSS styles for elements containing the child */
}

例:

div 要素に次のクラスを持つ子 div が含まれている場合に、その div 要素に赤い境界線を付けるには"a":

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

注: :has() 疑似クラスは最新のブラウザーではサポートされていますが、Internet Explorer などの古いブラウザーではサポートされていません。

JavaScript を使用した代替案(jQuery):

古いブラウザとの互換性が必要な場合は、jQuery の :has() セレクターで JavaScript を使用できます:

$('div:has(div.a)').css('border', '1px solid red');

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