[CSS] :has() 선택자에 대해

CSS :has() 선택자에 대해

:has 선택자는 '부모 선택자' 또는 '조건부 선택자'라고도 불린다.

기본 문법

/* 기본 형태 */
부모요소:has(자식요소) {
    /* 스타일 */
}

브라우저 지원 현황

• Chrome: 105버전 이상
• Safari: 15.4버전 이상
• Firefox: 121버전 이상 (2024년 1월 Release)
• Edge: 105버전 이상

주요 사용 사례

1. 자식 요소 존재 여부에 따른 스타일링

/* p 태그를 포함한 div에만 스타일 적용 */
div:has(p) {
    background-color: #f0f0f0;
    padding: 20px;
}

2. 폼 유효성 검사

/* 필수 입력 필드가 비어있을 때 부모 요소 스타일링 */
.form-group:has(input:required:invalid) {
    border-left: 4px solid red;
}

3. 이미지 레이아웃 조정

/* 이미지가 세로형일 때 다른 레이아웃 적용 */
figure:has(img[height > width]) {
    grid-row: span 2;
}

4. 복잡한 선택자 조합

/* 비어있지 않은 p 태그를 포함하는 article에 스타일 적용 */
article:has(p:not(:empty)) {
    margin-bottom: 2em;
}

/* 특정 클래스를 가진 요소를 포함하는 경우 */
.container:has(.special-item) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

실전 예제

1. 카드 레이아웃 최적화

/* 이미지가 있는 카드와 없는 카드의 레이아웃 자동 조정 */
.card:has(img) {
    grid-template-rows: auto 1fr auto;
}

.card:not(:has(img)) {
    grid-template-rows: 1fr auto;
}

2. 동적 네비게이션 메뉴

/* 서브메뉴가 있는 경우에만 화살표 표시 */
.nav-item:has(.submenu) {
    padding-right: 20px;
}

.nav-item:has(.submenu)::after {
    content: "▼";
    position: absolute;
    right: 5px;
}

3. 반응형 테이블

/* 많은 열이 있는 테이블의 경우 스크롤 처리 */
.table-container:has(table tr th:nth-child(5)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

주의사항

1. 성능 고려: 복잡한 :has() 선택자를 과도하게 사용하면 성능에 영향을 줄 수 있다.

2. 대체 방안 준비: 구형 브라우저 지원을 위해 @supports 규칙과 함께 폴백 스타일을 제공하는 것이 좋다.

/* :has() 지원 여부 확인 */
@supports (selector(:has(*))) {
    /* :has() 사용 스타일 */
}

@supports not (selector(:has(*))) {
    /* 대체 스타일 */
}

마치며

브라우저 호환성과 성능을 고려하여 적절히 사용하는 것이 중요하다.