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

子要素を持つ親の CSS スタイル

Web 開発では、親要素に子要素が含まれるかどうかに基づいて、親要素にスタイルを適用することが必要になる場合があります。純粋に CSS を使用すると、これは has() セレクターを通じて実現できます。

ul li:has(ul.sub) {
    /* Styles for parent li elements with child ul elements with class "sub" */
}

ここでは、has() セレクターは、parent li 要素 (ul 内の要素) をターゲットにするために使用されます。要素) には、クラス「sub」を持つ child ul 要素があります。このような親 li 要素は、それに応じてスタイルを設定できます。

HTML の例:

<ul class="main">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa
        <ul class="sub">
            <li>bbbb</li>
            <li>bbbb
                <ul>
                    <li>cccc</li>
                    <li>cccc</li>
                    <li>cccc</li>
                </ul>
            </li>
            <li>bbbb</li>
            <li>bbbb</li>
            <li>bbbb</li>
        </ul>
    </li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

CSS の例:

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

この CSS を使用すると、サブリストを含むメインリスト内のすべての親 li 要素の背景が水色になります。色。

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