CSS 선택자 명시도(Specificity)는 캐스케이드 과정에서 언제 비교하나요?

이렇게 답해 보세요 (핵심 답변)

선택자 명시도는 한 요소의 같은 속성에 여러 스타일 규칙이 경합할 때, 출처(Origin), !important 여부, 그리고 @layer 순서 같은 앞선 우선순위 조건이 모두 동일한 선언들 사이에서 어느 선택자가 더 구체적인지 가리는 기준입니다. 비교할 때는 ID 선택자 수, 클래스·속성·가상 클래스 수, 타입·가상 요소 수를 왼쪽 범주부터 차례대로 대조합니다. 만약 이 명시도까지 같다면 스코프 근접도나 스타일시트에서 나중에 선언된 규칙이 최종적으로 적용됩니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 클래스 선택자를 아무리 많이 겹쳐 써도 ID 선택자 하나를 이길 수 없으므로, 세 자리 숫자의 단순 덧셈이 아니라 범주별 비교로 이해해야 합니다.
2. :where()는 명시도가 항상 0이어서 기본 스타일 초기화에 유리하고, :is()와 :not()은 괄호 안 선택자 중 가장 높은 명시도를 따라갑니다.

면접에서 자주 하는 실수

!important를 선택자 명시도 점수에 높은 숫자를 더하는 방식으로 설명하면 캐스케이드 단계와 섞이므로 주의해야 합니다.