CSS를 사용하여 하위 요소를 기반으로 상위 요소의 스타일을 어떻게 지정할 수 있습니까?-CSS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2024-11-24 06:08:18

원래의

900명이 탐색했습니다.

How Can I Style a Parent Element Based on its Child Elements Using CSS?

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

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

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

has() 선택기 :

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

요소에 하위

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() 선택기를 사용하면 모든