CSS의 하위 요소를 기반으로 상위 요소의 스타일을 지정할 수 있나요?

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

포함된 하위 요소를 기반으로 요소에 CSS 스타일을 적용할 수 있나요?

예, CSS는 다음을 사용하여 이를 달성할 수 있는 방법을 제공합니다. :has() 의사 클래스. 지정된 하위 요소가 포함되어 있는지 여부에 따라 요소를 타겟팅할 수 있습니다.

구문:

div:has(child-selector) {
  /* CSS styles for elements containing the child */
}

예:

다음 클래스의 하위 div가 포함된 경우 div 요소에 빨간색 테두리를 지정하려면 "a":

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

참고: :has() 의사 클래스는 최신 브라우저에서 지원되지만 Internet Explorer와 같은 이전 브라우저에서는 지원되지 않습니다.

JavaScript를 사용한 대안 (jQuery):

이전 브라우저와의 호환성이 필요한 경우 jQuery의 :has() 선택기와 함께 JavaScript를 사용할 수 있습니다:

$('div:has(div.a)').css('border', '1px solid red');

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