개요

CSS에서 선택자는 DOM에서 스타일을 적용할 대상 요소 집합을 정의하는 식 컴포넌트 스코프와 일관된 스타일링, 유지보수 비용에 직접 영향 핵심 유형과 매칭 원리, 명시도와 베스트프랙티스 중심 요약

핵심 개념

  • 타입 선택자 tag 특정 태그 타깃
  • 클래스 선택자 .class 재사용 가능한 스타일 단위에 적합
  • 아이디 선택자 #id 고유 요소 타깃, 명시도 높음
  • 속성 선택자 [attr], [attr=value], [attr*=substr] 속성 값 기반 매칭
  • 가상 클래스 :hover, :focus, :active, :not(), :is() 상태나 집합 표현
  • 가상 요소 ::before, ::after 논리적 하위 요소 생성
  • 결합자 A B 하위, A > B 자식, A + B 인접 형제, A ~ B 일반 형제 관계 표현
  • 그룹 A, B 동일 스타일의 대상 묶음
  • 최신 선택자 :has() 부모가 특정 자식을 가질 때 매칭, 브라우저 지원 범위 확인 권장

동작 원리와 명시도

브라우저는 각 규칙의 선택자를 DOM 노드에 대조해 매칭된 규칙을 수집 후 명시도와 소스 순서로 충돌 해결 명시도 계산 규칙 요약

  • 인라인 스타일 > 아이디 > 클래스/속성/가상 클래스 > 타입/가상 요소
  • !important는 동일 속성 충돌 시 최우선이나 유지보수 비용 큼, 최후 수단 권장
  • 동일 명시도라면 나중에 선언된 규칙이 우선 간단 지표 예시
  • #id .item 명시도 1-1-0 수준으로 높음
  • .btn.primary:hover 명시도 0-3-0 범주
  • :where() 내부는 명시도 0으로 계산되어 안전한 래핑에 유용

주의사항과 베스트프랙티스

  • 클래스 중심 설계 지향, 아이디 남용 지양
  • 결합자 체인 과도 사용 지양, 깊이 3단 내외 유지 권장
  • 낮은 명시도로 설계하고 필요한 곳에서만 점진적 상향, :where()로 기본 골격 감싸기 유용
  • 상태 표현은 가상 클래스 우선, 자바스크립트 훅 클래스는 역할 분리
  • 속성 선택자 중 서브스트링 매칭 *, ^, $ 남용 지양, 큰 DOM에 성능 부담 발생 가능
  • !important는 레거시 제거나 외부 주입 스타일 오버라이드 같은 특수 상황에 한정
  • 호환성 확인 습관화, 특히 :has(), :is(), :where() 같은 최신 선택자 주의
  • DevTools의 Elements 패널에서 매칭 규칙과 Computed 보기로 충돌 원인 추적, Coverage로 미사용 규칙 점검

간단 예시

선택자 결합과 상태 필터로 의도를 좁히는 패턴 예시

.container > button.primary:not(:disabled) { opacity: 1 }
.card:has(img[alt]) { outline: 1px dashed currentColor }
.icon + span { margin-left: 4px }

의미

  • 컨테이너 직계 자식 버튼 중 활성 기본 버튼만 타깃
  • 이미지가 포함된 카드만 시각적 표시 적용, :has() 지원 환경에서 사용
  • 아이콘 뒤 텍스트에 좌측 간격 부여, 인접 형제 결합자 활용

마무리

선택자는 스타일의 스코프와 유지보수 비용을 결정하는 핵심 도구 클래스 중심, 낮은 명시도, 얕은 결합, 최신 기능의 호환성 점검이라는 원칙을 기본으로 가져가면 예측 가능성과 가독성, 성능을 동시에 확보 가능 필요 시 명시도를 설계 도구로 인식하고 의도적으로 관리할 것

참고자료

아래 자료로 상세 문법과 브라우저 지원 현황 확인 권장

참고자료