선택자 명시도와 우선순위

개념 이해하기

같은 속성이 충돌하면 중요도, cascade layer, specificity, 소스 순서를 비교합니다. 일반적으로 id가 class보다, class가 태그보다 구체적이지만 유지보수를 위해 낮고 일정한 specificity가 좋습니다.

문단 하나에 세 규칙이 모두 걸립니다. 명시도를 id, class, 태그 개수 순서로 세면 p는 0-0-1, .target은 0-1-0, id 선택자는 1-0-0이라 id 규칙의 갈색이 최종 색이 됩니다. 그 규칙을 CSS 맨 위로 옮겨도 결과가 같은 것은 소스 순서가 명시도에서 승부가 나지 않을 때만 비교되기 때문입니다.

:where()로 감싼 선택자는 명시도가 0이라 어떤 규칙으로도 쉽게 덮을 수 있어 기본 스타일을 정의할 때 쓸모가 있습니다. 반대로 :is()와 :not()은 괄호 안에서 가장 높은 명시도를 가져가므로, id 선택자와 p를 함께 넣은 :is()는 p에 걸릴 때도 id 하나만큼 강해집니다.