이 도구 소개

선택자의 고전적인 명시도 (a,b,c)를 계산해, DevTools를 열지 않고도 어떤 규칙이 우선하는지 확인할 수 있습니다. 판단 대상은 선택자 자체이며 선언 순서나 @layer는 반영하지 않습니다.

사용 방법

선택자를 입력하거나 붙여 넣고 계산을 실행해 ID, 클래스, 요소별 내역을 확인하세요. 값이 낮을수록 나중에 덮어쓰기가 쉬워집니다.

예시 선택자는 요소와 클래스가 섞인, 오래된 내비게이션 CSS와 비슷한 형태입니다.

입력

nav.site-header .menu a.active

출력

Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2

!important를 자주 쓰게 된다면 진짜 문제는 쌓여 온 명시도 부채입니다.

명시도는 어떻게 계산하나요?

세 그룹을 셉니다. ID, 그다음 클래스·속성·의사 클래스, 마지막으로 요소·의사 요소입니다. 결과는 (a,b,c)로 표시되며 왼쪽부터 비교합니다.

!important나 인라인 스타일도 여기에 나오나요?

아니요. 둘은 선택자 밖에 있어 (a,b,c) 점수에 포함되지 않습니다. 인라인 스타일이나 !important는 어떤 선택자 명시도보다도 우선합니다.