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

하위 요소를 기반으로 상위 요소 스타일 지정

특정 하위 요소의 존재 여부에 따라 적용되는 요소에 대한 CSS 스타일을 정의할 수 있습니다. 강요. 이는 :has() 의사 클래스를 사용하여 수행됩니다.

예

다음 HTML을 고려하세요.

<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

자식을 기반으로 상위 div의 스타일을 지정하려면, :has() 의사 클래스를 사용하세요:

div:has(div.a) { border: solid 3px red; }
div:has(div.b) { border: solid 3px blue; }

첫 번째 div에는 다음 내용이 포함되어 있으므로 빨간색 테두리가 표시됩니다. 클래스가 "a"인 하위 div. 두 번째 div에는 "b" 클래스가 있는 하위 div가 포함되어 있으므로 파란색 테두리가 표시됩니다.

참고: :has() 의사 클래스 이전에는 이 동작만 가능했습니다. JavaScript를 사용하여 달성했습니다.

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