CSS 명시도 계산기
CSS 선택자 명시도를 (a, b, c) 튜플로 즉시 계산. 여러 선택자 비교, ID·클래스·요소 시각적 분석. 무료 브라우저 기반 도구.
사용 방법
- 입력 필드에 CSS 선택자를 입력합니다. 예:
#nav .item:hover. - 명시도 튜플
(a, b, c)와 색상별 분석이 즉시 표시됩니다. - 여러 선택자를 비교하려면 쉼표로 구분합니다:
#nav .item, .item:hover. - 각 결과의 복사 버튼을 클릭하면 튜플이 클립보드에 복사됩니다.
(a, b, c) 튜플 읽기
- a — ID:
#id선택자 하나당 +1. - b — 클래스 / 속성 / 가상 클래스:
.class,[attr],:가상클래스하나당 +1. - c — 요소 / 가상 요소: 태그 이름 또는
::가상요소하나당 +1.
왼쪽부터 비교합니다. 처음으로 다른 열이 승패를 결정합니다. (1,0,0)은 항상 (0,99,99)를 이깁니다.
일반적인 예시
*→(0, 0, 0)p→(0, 0, 1).class→(0, 1, 0)#id→(1, 0, 0)#id .class:hover→(1, 2, 0)div > p + span::before→(0, 0, 4)
FAQ
CSS 명시도란 무엇인가요?
CSS 명시도는 같은 요소에 여러 규칙이 적용될 때 어떤 규칙이 우선하는지 결정합니다. (a, b, c) 세 값으로 표현하며, a는 ID 선택자 수, b는 클래스/속성/가상 클래스 수, c는 요소 타입/가상 요소 수를 나타냅니다.
명시도는 어떻게 계산하나요?
a = ID 선택자 수(#id). b = 클래스(.class)·속성([attr])·가상 클래스(:hover) 수. c = 요소 타입(div, span)·가상 요소(::before) 수. 전체 선택자(*)와 결합자(+, >, ~)는 0입니다.
여러 선택자를 비교하려면?
쉼표로 구분하여 입력하세요. 각 선택자의 명시도 튜플이 나란히 표시됩니다. 왼쪽부터 순서대로 비교해 처음으로 다른 열의 값이 큰 선택자가 우선합니다.
:not(), :is(), :has()는 어떻게 처리되나요?
:not()과 :is()는 인수 중 가장 높은 명시도를 사용합니다. :where()는 항상 0입니다. :has()는 인수의 명시도를 사용합니다. 이 도구는 이 가상 클래스들을 단순화하여 파싱합니다.
인라인 스타일이나 !important는 포함되나요?
인라인 스타일(style 속성)은 (a, b, c) 위에 위치하며 !important는 모든 것을 덮어씁니다. 이 도구는 선택자 명시도만 계산합니다.