CSS 중의 논리적 의사클래스

카테고리

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

서브카테고리

웹 개발

대상자

프론트엔드 개발자

• 난이도: 중급 이상 (CSS 선택자 이해 필요)
• 도움: 현대적인 CSS 선택자 활용법을 익히고, 선택자 구조를 단순화하는 기술 습득

핵심 요약

• :not(selector): 특정 선택자에 해당하지 않는 요소 선택 (예: a:not(.btn))
• :is(selector, …): 동일한 스타일을 적용할 선택자 병합 (예: :is(h1, h2, h3))
• :where(selector, …): 특이도(pecificity)가 항상 0인 선택자 (예: :where(article, section))
• :has(selector): 특정 자식/손자 요소를 포함한 요소 선택 (예: button:has(svg))

섹션별 세부 요약

1. 논리적 의사클래스 개요

• :not(selector): 특정 조건에 해당하지 않는 요소 선택 (예: textarea:not([rows]))
• :is(selector, …): 중복된 선택자 집합을 단순화 (예: article > :is(p, span))
• :where(selector, …): 특이도 제거를 위한 선택자 (예: :where(h1, h2, h3))
• :has(selector): 특정 하위 요소를 포함한 요소 선택 (예: label:has(+ [required]))

2. 추천 의사클래스 및 예시

• :not: 특정 클래스/속성 제외 (예: a:not(.btn))
• :is: 동일한 스타일 적용을 위한 선택자 병합 (예: :is(h1, h2, h3))
• :where: 특이도 제거 (예: :where(article, section))
• :has: 하위 요소 존재 여부 기반 선택 (예: button:has(svg))

결론

• 핵심 팁: :is와 :where를 활용해 선택자 중복을 줄이고, :has로 복잡한 DOM 구조를 효율적으로 선택하세요.
• 실무 적용: 현대적인 CSS 선택자 규칙을 준수하여 코드 가독성과 유지보수성을 향상시킬 수 있습니다.