CSS만 사용하여 하위 요소를 기반으로 상위 요소의 스타일을 지정하려면 어떻게 해야 합니까?

하위 요소가 있는 부모를 위한 CSS 스타일

웹 개발에서는 하위 요소가 포함되어 있는지 여부에 따라 상위 요소에 스타일을 적용해야 할 수 있습니다. 순전히 CSS를 사용하면 has() 선택기를 통해 이를 수행할 수 있습니다.

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

여기서 has() 선택기는 부모 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!