[CSS] has 선택자

1. has 선택자? (has selector)

• has 선택자는 특정 요소를 가지는 요소를 선택할 때 사용할 수 있다.
• JQuery에서 제공하던 기능이나, 일부 브라우저에서 사용 가능하다.
• 특정 자식 요소를 가지는 부모 요소를 선택할 때 유용하다.

p:has(span) {
  color: red;  /* span요소를 가지고 있는 p요소를 선택 */
}

• 아래 예시는 has선택자를 사용해, a 요소를 자식으로 가지는 li요소에 빨간 배경색을 준 코드이다.

See the Pen has selector by KumJungMin (@kumjungmin) on CodePen.

• 그런데, 빨간색 배경이 아래 그림처럼 떠야 하는데, 작동하지 않는 모습을 발견할 것이다.

2. 호환 브라우저는..?

😂 슬프게도.. 대부분의 브라우저에서 has 선택자를 지원하진 않는다ㅠ (지원 브라우저 보러가기)

• 만약 실제 작동을 보고 싶다면, Safari Technology Preview를 설치해서 확인할 수 있다ㅜ