CSS의 하위 요소 존재 여부에 따라 상위 요소의 스타일을 어떻게 지정할 수 있나요?

CSS를 사용하여 하위 존재 여부에 따라 상위에 스타일 적용

중첩 요소로 작업할 때 상위에 스타일을 적용하는 것이 바람직할 수 있습니다. 하위 요소가 포함되어 있는지 여부에 따라 결정됩니다. CSS는 이 목적을 위해 제한된 솔루션을 제공합니다.

':has()' 선택기 사용

:has() 선택기를 사용하면 특정 하위 요소. 예를 들어, ul.sub 하위 요소가 포함된 경우 상위 li 요소에 스타일을 적용하려면:

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

제한 사항

안타깝게도 :has() 선택기는 CSS4에서만 지원되며 브라우저에서는 널리 채택되지 않습니다.

대안 JavaScript 사용

또는 JavaScript를 사용하여 원하는 효과를 얻을 수 있습니다.

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

그런 다음 CSS에서 li.has_sub 클래스에 대한 스타일을 추가하세요.

참고:

원래 답변의 취소선 섹션은 $ 선택기. 이는 CSS4 제안이지만 현재 어떤 브라우저에서도 지원되지 않습니다.

위 내용은 CSS의 하위 요소 존재 여부에 따라 상위 요소의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!