CSS의 :has() 의사클래스 탐구

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *대상자**: 웹 개발자, 특히 CSS 스타일링과 동적 UI 개발에 관심 있는 중급 이상 개발자
• *난이도**: 중급 (CSS 선택자 및 성능 최적화 이해 필요)

핵심 요약

• :has() 의사클래스는 자식 요소의 존재 여부를 기준으로 부모 요소를 선택하는 CSS Level 4 기능입니다.
• 모던 브라우저(Chrome 105+, Firefox, Safari 등)에서 생산성 사용 가능하며, @supports로 호환성 체크 가능합니다.
• 실용적 사례: 폼 검증, 조건부 레이아웃, 접근성 강화 등 JavaScript 없이 동적 스타일링이 가능합니다.

섹션별 세부 요약

1. 개요

• :has()는 CSS Selectors Level 4에 포함된 부모 선택자로, 자식 요소의 존재 여부를 기준으로 스타일링 가능합니다.
• 기존 :hover, :first-child와 달리 내용 기반 선택을 지원합니다.
• 예시: div:has(p)는 요소가 포함된 모든 에 스타일 적용.

2. 구문 및 작동 방식

• 구문: selector:has(자식_선택자)

예: section:has(p) { background: lightblue; }

• 특징:

- 자식 요소의 내부 깊이와 관계없이 모든 후손 요소를 탐색합니다.

- querySelectorAll과 유사한 동작을 합니다.

3. 실용적 사례

• 폼 UX 개선:

```css

.form-group:has(input:invalid) { border: 1px solid red; }

```

• 컨텐츠 기반 스타일링:

```css

article:has(img) { border-left: 4px solid green; }

```

• 접근성 강화:

```css

.section:has(.alert) { outline: 2px dashed orange; }

```

4. 성능 고려사항

• 복잡한 선택자 사용 시 계산 비용 증가

- div:has(section > div > .btn)보다 div:has(.btn)이 더 효율적입니다.

• 범위 제한: *:has(...)보다 특정 컨테이너에 적용하는 것이 좋습니다.
• DOM 변경 시 리플로우 최소화: 빈번한 DOM 조작을 피해야 합니다.

5. 한계 및 주의 사항

• 자기 자신을 선택할 수 없음: a:has(a)는 작동하지 않습니다.
• 선택자 특이성: div:has(#unique)는 div:has(p)보다 특이성이 높습니다.
• 호환성 대체:

```css

@supports selector(:has(*)) {

div:has(p) { border: 1px solid blue; }

}

```

결론

:has()는 JavaScript 없이 동적 스타일링을 가능하게 하며, 폼 검증, 조건부 레이아웃 등에 유용합니다. 성능 최적화(선택자 간소화, 범위 제한)와 호환성 체크(CanIUse, @supports)를 통해 실무에 적용해야 합니다.