Specificity

개요 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 노드에 대조해 매칭된 규칙을 수집 후 명시도와 소스 순서로 충돌 해결 명시도 계산 규칙 요약 ...