CSS 선택자 명시도 계산기
CSS 선택자의 우선순위(A-B-C)를 즉시 계산합니다
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
CSS 선택자를 입력하면 ID(A), 클래스·속성·가상 클래스(B), 태그·가상 요소(C) 개수를 자동으로 분석해 명시도 점수를 보여줍니다. 스타일이 왜 적용되지 않는지, 어떤 규칙이 우선하는지 헷갈릴 때 프런트엔드 개발자와 퍼블리셔에게 유용하며, 입력한 선택자는 브라우저 안에서만 처리되고 서버로 전송되지 않습니다.
사용 방법
- 입력창에 분석하고 싶은 CSS 선택자를 입력합니다 (예: div.content > p::first-line)
- 자동으로 계산된 A(ID), B(클래스/속성/가상클래스), C(태그/가상요소) 값을 확인합니다
- A-B-C 형식의 최종 명시도 점수를 확인합니다
- 아래 목록에서 선택자가 어떤 구성 요소로 나뉘어 계산되었는지 하나씩 확인합니다
자주 묻는 질문
- 명시도 점수는 어떻게 비교하나요?
- A, B, C 순서대로 자릿수를 비교합니다. A가 높은 선택자가 항상 우선하고, A가 같으면 B, B도 같으면 C를 비교합니다.
- :not(), :is(), :has() 같은 선택자도 계산되나요?
- 네, 이 함수형 가상 클래스들은 괄호 안 선택자 중 명시도가 가장 높은 것을 기준으로 계산에 반영됩니다. 단 :where()는 명시도에 영향을 주지 않습니다.
- 입력한 선택자가 서버로 전송되나요?
- 아니요, 모든 계산은 브라우저 내에서 자바스크립트로 처리되며 어디로도 전송되지 않습니다.