CSS의 특정 하위 요소 존재를 기반으로 상위 요소의 스타일을 어떻게 지정할 수 있습니까?

CSS를 사용하여 하위 요소가 있는 경우 상위 요소에 스타일 적용

CSS에서는 하위 요소의 존재 여부에 따라 상위 요소의 스타일을 지정할 수 있습니다. has() 선택기를 사용하여 달성했습니다.

"sub" 클래스가 있는 하위 항목이 포함된 경우 상위 항목에 스타일을 적용하려면 다음을 사용하세요. CSS 규칙:

ul li:has(ul.sub) {
  /* Parent styles */
}

예를 들어 다음 HTML이 있는 경우:

<ul class="main">
  <li>Parent 1</li>
  <li>Parent 2</li>
  <li>Parent 3 with Child
    <ul class="sub">
      <li>Child of Parent 3</li>
    </ul>
  </li>
  <li>Parent 4</li>
</ul>

그리고 다음 CSS는:

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

출력에는 " Parent 3 with Child'가 연한 파란색으로 표시되어 부모(li)에 클래스가 "sub"인 하위가 있음을 나타냅니다.

참고 질문의 제안된 답변에 언급된 $ 선택기는 아직 CSS4에서 표준화되지 않았습니다. 대신 has() 선택기가 이 기능을 달성하기 위해 지원되는 방법입니다.

위 내용은 CSS의 특정 하위 요소 존재를 기반으로 상위 요소의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!