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

CSS를 사용하여 자식이 있는 경우 부모에게 스타일 적용

웹 개발자로서 스타일을 적용해야 하는 상황에 직면할 수 있습니다. 특정 하위 요소의 존재 여부에 따른 상위 요소입니다. 이는 간단한 작업처럼 보일 수 있지만 CSS만으로 이를 달성하는 것은 어려울 수 있습니다.

다행히도 CSS는 이를 달성하는 데 도움이 되는 선택기를 제공합니다.

has() 선택기 :

has() 선택기를 사용하면 특정 하위 요소가 포함된 요소를 선택할 수 있습니다. 예를 들어, 상위

요소에 하위

가 있는 경우; "sub" 클래스가 있는 요소에는 다음 CSS를 사용할 수 있습니다.

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

예:

다음 HTML 구조를 고려하세요.

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

has() 선택기를 사용하면 모든

• 하위
  가 있는 클래스 "main"을 사용합니다. "sub" 클래스가 있는 요소:

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

  참고: has() 선택기는 모든 브라우저에서 지원되지 않습니다. 더 광범위한 브라우저 지원이 필요한 경우 대신 JavaScript 솔루션 사용을 고려할 수 있습니다.

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