CSS 명시도 계산기

두 CSS 규칙이 같은 요소를 겨냥하면 캐스케이드는 명시도가 높은 쪽을 고릅니다. 명시도는 (ID, 클래스와 속성과 의사 클래스, 타입과 의사 요소)로 셉니다. 이 툴은 선택자를 파싱해 각 부분에 가중치를 매기고(#id는 +1·0·0, .class는 +0·1·0, div는 +0·0·1), :is(), :not(), :has() 같은 의사 클래스는 인자 중 가장 높은 것을 취하며 :where()는 언제나 0으로 처리합니다. 선택자 두 개를 넣으면 어느 쪽이 얼마 차이로 이기는지 보여 주므로, 규칙이 왜 안 먹는지 짐작하지 않아도 됩니다.

세 숫자는 더하는 것이 아니라 왼쪽부터 차례로 비교하는데, 대부분의 설명이 건너뛰는 부분이 이것입니다. ID 하나가 클래스 몇 개든 이기므로 #header는 클래스 이름 백 개를 단 선택자보다 위에 섭니다. 자리올림이 일어나지 않습니다. 명시도를 10진수처럼 생각하는 것은 누군가 클래스를 열한 개 쓸 때까지만 통합니다.

명시도는 첫 번째가 아니라 세 번째 판별 기준이기도 합니다. !important 선언은 선택자와 무관하게 평범한 선언을 이기고, 인라인 스타일은 일반 작성자 규칙 위에 있으며, 캐스케이드 레이어는 명시도를 비교하기도 전에 참조됩니다. 두 선언이 그 모두에서 같아지면 소스 순서상 마지막 것이 이깁니다. 점수가 높은데도 적용되지 않는 규칙은 대개 이 단계가 아니라 그 앞 단계에서 지고 있는 것입니다.

:where()는 바로 이 산수에서 빠지려고 존재합니다. 언제나 0을 기여하므로, 작성자가 클래스 하나로 덮어쓸 수 있어야 하는 라이브러리 기본값에 알맞은 도구입니다. 반면 :is()와 :not()은 인자 중 가장 명시적인 것의 값을 취하므로, :is(h1, #title)은 h1에 일치하는 경우에도 #title만큼 무겁습니다.

이 계산은 일치 결과가 아니라 선택자를 설명합니다. 두 선택자가 똑같은 점수를 받고도 서로 다른 요소를 겨냥할 수 있고, 지금 보고 있는 요소에 규칙이 애초에 일치하지 않는다면 종이 위의 높은 점수는 아무 의미가 없습니다.