Selector Matching
CSS 선택자 매칭 엔진
선택자는 문서 전체에 막연히 적용되는 것이 아니라 DOM 노드가 규칙 조건을 만족하는지 검사해 최종 스타일 후보를 만든다.
태그 선택자
같은 태그 이름의 모든 요소를 후보로 잡음
p, h1, table처럼 구조 자체를 기준으로 한다.
낮은 특이성
아이디 선택자
id가 같은 단일 요소를 강하게 지정
#header는 문서 안에서 유일하다는 전제를 갖는다.
높은 특이성
클래스 선택자
여러 요소가 공유하는 의미 단위
.active, .warning처럼 상태나 역할을 반복 적용한다.
재사용
후손 선택자
부모 아래 깊이에 관계없이 탐색
section p는 section 내부의 모든 p를 후보로 삼는다.
공백
자식 선택자
직접 부모 관계만 인정
ul > li는 중첩 목록의 손자 li까지 잡지 않는다.
>
시험 포인트 · 가상 클래스 · 충돌 해결 점검
시험 포인트
선택자 의미와 우선순위는 따로 묻는다. 매칭 후 cascade가 이어진다.
가상 클래스
:hover, :focus는 요소의 현재 상태가 조건이 된다.
충돌 해결
여러 규칙이 매칭되면 특이성과 작성 순서로 최종값을 정한다.