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

CSS を使用して子の存在に基づいて親にスタイルを適用する

ネストされた要素を操作する場合、親にスタイルを適用することが望ましい場合があります。子要素が含まれているかどうかに基づいて決定されます。 CSS は、この目的のために限定的なソリューションを提供します。

「:has()」セレクターの使用

:has() セレクターは、特定の子要素。たとえば、親 li 要素に ul.sub 子が含まれている場合にスタイルを適用するには、次のようにします。

ul li:has(ul.sub) {
    background-color: green;
}

制限

残念ながら、:has() セレクターCSS4 でのみサポートされており、CSS4 では広く採用されていません。

JavaScript を使用した代替方法

別の方法として、JavaScript を使用して目的の効果を実現できます。

$('ul li:has(ul.sub)').addClass('has_sub');

次に、スタイルを追加します。あなたのli.has_subクラスCSS.

注:

元の回答の取り消し線セクションでは、$ セレクターの使用が提案されています。これは CSS4 提案ですが、現在どのブラウザーでもサポートされていません。

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