CSS 명시도 계산기

사용법

1. CSS 셀렉터 입력 또는 붙여넣기 — 입력에 맞춰 분석 갱신.
2. (ID, 클래스, 타입) 숫자 확인 — 튜플이 높은 쪽이 캐스케이드 승.
3. 비교 박스에 두 번째 셀렉터 붙여넣어 어느 쪽이 이기는지 확인.

자주 묻는 질문

왜 하나가 아닌 세 숫자?

명시도는 왼쪽부터 칼럼별로 비교: ID 하나가 어떤 수의 클래스도 이김; 클래스 하나가 어떤 수의 타입 셀렉터도 이김. (0,1,0) + (0,0,10) = 20처럼 더하는 직관은 CSSWG가 경고하는 전형적 오류.

:is()·:not()·:has() 카운트?

가장 가중치 높은 인수의 명시도 취함. :is(#a, .b) = 1·0·0, :not(.a, .b) = 0·1·0. :where()는 항상 0·0·0 — 명시도 0 오버라이드에 유용.

::before 같은 가상요소는?

가상요소(::before·::after·::first-line)는 타입 셀렉터로 카운트(0·0·1). 레거시 단일 콜론 형식(:before·:after)도 가상요소로 인식.

인라인 스타일 포함?

아니오 — 인라인 스타일은 별도 'a' 버킷(1·0·0·0)으로 이 도구는 모델링 안 함, 셀렉터에 인라인 못 씀. 인라인 오버라이드 필요시 !important 사용.

관련 도구