CSS 명시도 계산기
CSS 선택자의 명시도를 분석하고 비교합니다.
CSS 선택자의 우선순위를 ID, 클래스·속성·의사 클래스, 요소·의사 요소의 3개 숫자 튜플로 추정하고 두 선택자를 비교합니다.
CSS specificity 계산 방법
- 선택자 하나를 입력하고 우선순위 튜플을 계산합니다.
- 또는 비교 모드에서 선택자 A와 B를 각각 입력합니다.
- 왼쪽 숫자부터 순서대로 비교해 어떤 선택자가 더 강한지 확인합니다.
계산 방식과 주의점
완전한 CSS parser가 아니라 단순화된 파서로 ID, 클래스/속성/의사 클래스, 요소/의사 요소를 셉니다.
`:where()`는 0으로 처리하지만 `:not()`, `:is()`, `:has()`는 내부를 펼쳐서 계산하므로, 인자 중 가장 높은 specificity만 사용하는 실제 CSS 규칙과 복잡한 경우 결과가 다를 수 있습니다.
개인정보와 제한
모든 선택자 분석은 브라우저 안에서 처리됩니다. 일반적인 선택자를 빠르게 비교하는 참고용이며 최신 CSS 선택자의 모든 예외를 정확히 판정하는 정식 parser는 아닙니다.
CSS specificity 자주 묻는 질문
(1,2,3)은 무슨 뜻인가요?
ID 1개, 클래스·속성·의사 클래스 계열 2개, 요소·의사 요소 계열 3개를 뜻합니다.
:where()도 점수가 생기나요?
이 도구에서는 0으로 처리합니다.
:is(), :not(), :has()는 완전히 정확한가요?
아니요. 단순 구현이라 복잡한 selector list는 실제 사양보다 많이 셀 수 있습니다.
소스 순서도 비교하나요?
아니요. specificity만 비교하며 cascade 순서나 !important는 판단하지 않습니다.
CSS 파일 전체를 읽나요?
아니요. 입력한 선택자 문자열만 분석합니다.