🔥 css 부모 선택자는 무엇입니까?

:has는 부모 선택자 의사 클래스*입니다. 특정 하위 또는 뒤에 오는 특정 요소가 있는 경우( :has ) 상위 요소 속성을 변경할 수 있습니다.

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

다음은 :has 의사 클래스의 간단한 예입니다.

.parent:has(.child){
  color: blue;
}

이것이 의미하는 바는 .parent 요소에 .child 요소가 포함된 경우 상위 요소의 텍스트 색상을 파란색으로 변경한다는 것입니다. 이전에는 css로 구현할 수 없었습니다. 그러나 :has 선택기 덕분에 이제 이 논리를 css에 직접 추가하고 하위 항목.parent에 따라 수정:has할 수 있습니다.

At the time of writing this article :has pseudo-class only works in Safari 15.4 and in Chrome Canary. Can i use

예시

호환되는 브라우저에서 코드펜을 열지 않아도 되도록 여기서 스크린샷을 사용하고 있습니다. ;)

빈 버튼과 SVG가 있는 버튼

아이콘이 있거나 없는 2가지 변형 버튼을 사용하는 대신 부모에서 :has 속성을 간단히 사용할 수 있습니다.

button:has(svg) {
  background: #bd3c91;
}

:has 선택자에 더 많은 것이 있습니다. 더 많은 사용 사례에 관심이 있는 경우 의견에 알려주시면 더 실용적인 사용 사례를 추가하겠습니다.

아슬람 샤 팔로우

Currently working on https://codedmails.com