선택자 결정 순서

선택자는 대상을 찾고, cascade는 최종 값을 고른다

CSS 적용 결과는 “ID가 강하다” 같은 감각만으로 결정되지 않습니다. 선언의 출처와 중요도, 특이도, 선언 순서, 상속 여부가 차례로 비교되어 한 속성의 최종 값이 정해집니다.

CSS cascade 최종값 결정 파이프라인 선택자 매칭 후 중요도, 특이도, 선언 순서, 상속 여부를 차례로 비교해 최종 값을 고른다. 1 매칭 대상 요소 찾기 2 중요도 출처 / important 3 특이도 ID-class-type 4 선언 순서 나중 선언 승리 5 상속 값 없을 때 특이도는 중간 판정일 뿐이고, 앞 단계에서 탈락한 선언은 뒤 단계에 오지 않는다
1 매칭
대상 요소를 먼저 찾는다 선택자가 현재 요소와 상태에 맞지 않으면 후보에서 빠진다.
2 중요도
출처와 important를 비교한다 브라우저, 사용자, 작성자 스타일의 우선권을 먼저 정리한다.
3 특이도
ID, class, type 점수를 비교한다 같은 중요도 안에서 더 구체적인 선택자가 앞선다.
4 선언 순서
동률이면 나중 선언이 이긴다 같은 점수와 출처라면 파일 아래쪽 선언이 최종 값이 된다.
5 상속
직접 지정값이 없을 때 부모 값을 본다 color처럼 상속되는 속성만 부모의 계산값을 가져온다.

앞 단계에서 탈락한 선언은 뒤 단계로 넘어오지 않는다.

1 매칭

선택자 매칭

.card p:hover는 hover 상태의 p가 .card 안에 있는지 확인합니다.

2 중요도

중요도와 출처

!important, 브라우저 기본값, 사용자 스타일, 작성자 스타일의 우선순위를 비교합니다.

3 특이도

특이도 튜플

ID, class/attribute/pseudo-class, type/pseudo-element 개수를 차례로 비교합니다.

4 선언 순서

같은 점수면 나중 선언

같은 출처와 같은 특이도라면 CSS 파일에서 더 뒤의 선언이 이깁니다.

5 상속

값이 없으면 상속 확인

color, font-family처럼 상속되는 속성만 부모 값을 물려받습니다.

선택자 해부

복합 선택자는 각 조각이 다른 점수를 더한다

#main .menu-item a:hover::after

#main은 ID, .menu-item과 :hover는 class 계열, a와 ::after는 type 계열로 계산됩니다. 결합자 공백은 점수를 더하지 않고 관계만 제한합니다.

선택자별 역할 비교

선택자 대상 범위 특이도
p 문서의 모든 p 요소 0-0-1, 기본 문단 스타일에 적합
.note class가 note인 모든 요소 0-1-0, 재사용 가능한 컴포넌트 스타일
#hero 문서 안의 고유 id 요소 1-0-0, 과하게 쓰면 덮어쓰기 어려움
inline

인라인 스타일은 예외로 취급

style=""은 일반 선택자보다 강하므로 반복 스타일에는 쓰지 않습니다.

:where()

점수를 낮추는 선택자

:where() 안의 특이도는 0이므로 기본 테마 규칙에 유용합니다.

:is()

목록 중 가장 강한 항목

:is()는 인자 중 가장 높은 특이도를 선택자 점수에 반영합니다.

!important

정책용으로만 제한

일반 레이아웃 덮어쓰기보다 유틸리티 예외나 사용자 접근성 보정에 가깝게 둡니다.