01
ID 열부터 비교
ID, 클래스·속성, 요소 순서로 비교합니다. 클래스가 많아도 ID 하나를 넘지 못하며 동점의 입력 순서는 유지됩니다.
CSS 선택자 도구
CSS 명시도 계산기
선택자를 한 줄에 하나씩 입력하세요. 맨 바깥 쉼표는 각각의 후보로 나누고 HTML 일치 검사는 선택적으로 켭니다.
CSS 명시도 계산기
한 줄에 선택자 하나씩 입력하세요. 바깥 쉼표는 분리합니다.
선택자를 입력하세요.
선택자와 선택적 HTML은 브라우저에서 처리하며 외부 리소스를 가져오지 않습니다.
옵션
입력이 바뀌어 이전 결과가 오래되었습니다.
스타일이 예상과 다르게 적용될 때 CSS 명시도 계산기에서 ID, 클래스, 요소의 세 열을 따로 보면 원인을 좁힐 수 있습니다. CSS 선택자 우선순위는 단순히 숫자를 더한 값이 아닙니다.
CSS 명시도 비교 결과와 실제 HTML 일치 여부는 다른 질문입니다. CSS 선택자 가중치가 높아도 대상 요소가 없을 수 있으므로 두 정보를 분리해서 확인하세요.
CSS 명시도 계산기가 필요한 이유
의사 클래스의 기여를 확인
:is(#dialog, .panel)은 인수 중 가장 높은 점수를 가져오지만 :where(#dialog, .panel)은 0입니다. CSS 명시도 계산기는 어떤 부분이 ID 열을 올렸는지 보여 줍니다.
점수와 일치를 나란히 구분
#missing은 점수가 높아도 HTML 조각에서 일치하는 요소가 없을 수 있습니다. .card는 더 낮은 점수로 요소를 찾을 수 있으므로 두 값을 혼동하지 마세요.
비교 결과를 읽는 세 단계
02
같은 인수로 의사 클래스 비교
:is()와 :where()에 같은 목록을 넣어 보세요. :nth-child(... of S)는 자신의 의사 클래스 점수도 더합니다.
03
필요할 때만 HTML 검사
정적인 HTML 조각에서 일치 개수를 확인합니다. hover·focus 상태나 의사 요소 렌더링, 최종 스타일 적용까지 재현하지는 않습니다.
비교표에서 확인할 항목
A-B-C 점수 분해
ID, 클래스·속성·의사 클래스, 요소·의사 요소를 별도로 세고 기여한 부분을 표시합니다.
후보별 정렬
맨 바깥 쉼표로 나뉜 후보를 독립적으로 계산합니다. 높은 점수순으로 정렬해도 동점의 원래 순서는 보존합니다.
로컬 HTML 일치 검사
선택적으로 붙여 넣은 HTML을 실행되지 않는 구문 트리로 파싱합니다. 스크립트와 외부 리소스는 불러오지 않습니다.
점수만으로 결정할 수 없는 것
- 최종 승자를 단정하지 않음
- 실제 CSS 선언에는 출처, 중요도, 레이어, 속성, 범위와 작성 순서가 관여합니다. 이 도구는 선택자 점수만 계산합니다.
- 인라인 스타일과 !important는 제외
- style 속성과 !important는 A-B-C의 선택자 구성 요소가 아닙니다. 점수에 섞으면 캐스케이드 설명이 틀립니다.
- 쉼표 목록은 단일 점수가 아님
- 각 분기는 점수와 일치 대상이 다릅니다. 목록 전체의 하나의 값 대신 분기마다 표시합니다.
- 일치 0개와 점수 0은 다름
- 정적 조각에 일치하는 노드가 없어도 명시도는 유지됩니다. hover·focus나 의사 요소의 화면 표시도 검사하지 않습니다.
CSS 명시도 계산기 자주 묻는 질문
CSS 명시도 계산기는 어떻게 사용하나요?
한 줄에 하나씩 선택자를 입력하면 A-B-C 점수가 나옵니다. 바깥 쉼표는 독립 후보로 나누고 점수순 정렬도 할 수 있습니다.
CSS 명시도 계산기는 어떤 입력과 옵션을 지원하나요?
:is(), :not(), :has()와 점수가 0인 :where()를 지원합니다. HTML 조각 검사는 기본적으로 꺼져 있습니다.
결과는 어떻게 보거나 복사하나요?
결과 카드에서 각 선택자의 점수와 기여 부분을 확인하세요. 오류가 없는 최신 결과만 한꺼번에 복사할 수 있습니다.
입력한 내용이나 파일, 결과가 업로드되나요?
아니요. 선택자와 HTML 조각은 로컬 구문 트리에서 처리하며 페이지가 외부 리소스를 가져오지 않습니다.
이 도구가 지원하지 않는 것은 무엇인가요?
전체 스타일시트의 최종 캐스케이드, URL 수집, hover 같은 동적 상태 시뮬레이션은 제공하지 않습니다.
선택자 점수가 잘못되었나요?