CSS 명시도 계산기
두 CSS 규칙이 같은 요소를 타게팅하면 캐스케이드는 명시도가 더 높은 규칙을 선택 — (ID, 클래스/속성/가상클래스, 타입/가상요소)로 카운트. 이 도구는 셀렉터를 파싱하고 각 부분에 가중치 부여(#id +1·0·0, .class +0·1·0, div +0·0·1), :is()·:not()·:has() (가장 높은 인수 승)·:where() (항상 0) 같은 가상클래스 처리. 두 셀렉터를 입력해 어느 쪽이 캐스케이드에서 이기는지 확인 — 규칙이 적용되지 않는 이유를 추측할 필요 없음.
ID
1
클래스/속성/가상
2
타입/가상요소
3
토큰 분석
#navID+(1, 0, 0)ul타입+(0, 0, 1)li타입+(0, 0, 1).active클래스+(0, 1, 0)a타입+(0, 0, 1):hover가상클래스+(0, 1, 0)
두 셀렉터 비교
두 번째 셀렉터 붙여넣어 캐스케이드에서 어느 쪽이 이기는지 확인.
셀렉터 A
(1, 2, 3)
← A 승
셀렉터 B
(0, 1, 3)
예시
인라인 스타일·!important·소스 순서 모두 셀렉터 명시도를 이김. 이 도구는 셀렉터 자체에서 (ID, 클래스, 타입) 튜플만 계산.
사용법
- CSS 셀렉터 입력 또는 붙여넣기 — 입력에 맞춰 분석 갱신.
- (ID, 클래스, 타입) 숫자 확인 — 튜플이 높은 쪽이 캐스케이드 승.
- 비교 박스에 두 번째 셀렉터 붙여넣어 어느 쪽이 이기는지 확인.
자주 묻는 질문
- 왜 하나가 아닌 세 숫자?
- 명시도는 왼쪽부터 칼럼별로 비교: 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 사용.
관련 도구
CSS 선택자 테스터
HTML에 대해 CSS 선택자를 테스트하고 어떤 요소가 매칭되는지 정확히 확인합니다. 브라우저에서 동작합니다.
보이지 않는 / 제로폭 문자 탐지기
붙여넣은 텍스트의 NBSP·제로폭·양방향 마크·탭을 찾아내고 한 번에 정리.
CSS Flexbox 플레이그라운드
flex-direction·justify-content·align-items·gap을 클릭으로 조정 — CSS 또는 Tailwind 클래스 복사.
HTML / CSS / JS 미니파이어
HTML·CSS·JavaScript의 공백·주석을 제거 — 크기 절감 확인하고 결과 복사.
CSS Grid 플레이그라운드
grid-template-columns / rows·gap·아이템 정렬을 시각적으로 — CSS를 바로 복사.
CSS to JS 스타일 객체 변환기
CSS 선언 블록을 React/JS 인라인 스타일 객체로 브라우저에서 변환합니다.