[CSS] :has()

:has() 선택자는 해당 부모 선택자가 특정 자식 선택자를 가지고 있을 경우 적용하는 CSS의 if문입니다.

기존 CSS로는 구현할 수 없었던 것들을 구현할 수 있지만, 현재 파이어폭스에서 지원하고 있지 않아 사용 시 유의해서 사용해야합니다.

기본적인 사용법

/* div 요소가 h2를 가지고 있을 경우 */
div:has(h2) {
  border: 2px solid #fe4902;
}

/* div 요소가 h3 그리고 p를 가지고 있을 경우 (and 논리) */
div:has(h3, p) {
  background-color: #fe4902;
}

/* div 요소가 형제로 p를 가지고 있을 경우 */
div:has(+ p) {
  border: 2px solid #000;
}

See the Pen :has() - 1 by FE4902 (@fe4902) on CodePen.

 

:not() 선택자와 결합한 사용법

/* div 요소가 p를 가지고 있지 않을 경우 */
div:not(:has(p)) {
  background-color: #fe4902;
}

See the Pen :has() - 2 by FE4902 (@fe4902) on CodePen.

 

같은 부모 요소 내에서 다른 자식 요소를 선택하는 사용법

/* div 요소가 p를 가지고 있을 경우, 같은 div 요소 내 h3 요소 */
div:has(p) h3 {
  background-color: #fe4902;
}

See the Pen :has() - 3 by FE4902 (@fe4902) on CodePen.