CSS を使用して子要素に基づいて親要素のスタイルを設定する方法-CSSチュートリアル-php.cn

CSS を使用して子要素に基づいて親要素のスタイルを設定する方法

Barbara Streisand

リリース： 2024-11-28 17:45:17

オリジナル

819 人が閲覧しました

How to Style a Parent Element Based on its Child Elements with CSS?

CSS で子がある場合に親要素にスタイルを適用する方法

Web 開発では、要素との関係に基づいて要素に特定のスタイルを適用することが必要になることがよくあります。 DOM 内の他の要素。特別な課題の 1 つは、親要素に子要素が含まれている場合にその要素をスタイル設定することです。

次の HTML 構造を考えてみましょう。

<ul class="main">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
        <ul class="sub">
            <li>Sub Item 1</li>
            <li>
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                    <li>Sub Sub Item 3</li>
                </ul>
            </li>
            <li>Sub Item 3</li>
            <li>Sub Item 4</li>
            <li>Sub Item 5</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

ログイン後にコピー

CSS でスタイルを設定するには、

を使用します。子

を持つ要素

ul li:has(ul.sub) {
    background-color: yellow;
    border: 1px solid black;
}

ログイン後にコピー

:has(ul.sub) 条件を満たす li 要素に、background-color プロパティと border プロパティを適用することで、それらを区別できます。子 ul.sub 要素を持たない li 要素。

:has() セレクターはすべてのブラウザーでサポートされているわけではないことに注意することが重要です。そのため、これを使用します。このアプローチではブラウザの互換性を考慮する必要がある場合があります。

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