CSS Specificity 계산기

언제 사용하나요?

CSS 스타일이 의도대로 적용되지 않을 때 어떤 선택자가 우선하는지 확인할 때, 여러 선택자의 우선순위를 비교할 때, !important 없이 스타일 충돌을 해결할 때 사용합니다.

사용 방법

• CSS 선택자를 입력창에 입력합니다.
• (ID, 클래스·속성·의사클래스, 요소·의사요소) 점수가 계산됩니다.
• 쉼표로 여러 선택자를 입력해 어느 것이 우선 적용되는지 비교합니다.

입력값 안내

CSS 선택자를 입력합니다. ID(#), 클래스(.), 속성([]), 의사클래스(:hover), 의사요소(::before)와 :is()·:not()·:where()를 지원합니다.

계산·변환 기준

CSS 명시도 규칙에 따라 A(ID 개수), B(클래스·속성·의사클래스 개수), C(요소·의사요소 개수)를 세어 점수를 계산합니다. :where()는 0, :is()·:not()은 인자 중 가장 높은 값을 적용합니다.

사용 예시

• 스타일 충돌 해결 - 두 선택자 중 어느 것이 우선 적용되는지 점수로 확인합니다.
• 선택자 비교 - 여러 선택자의 우선순위를 한눈에 비교합니다.
• CSS 학습 - 명시도 규칙을 점수로 확인하며 CSS 우선순위 개념을 익힙니다.

예시

• #nav ul.menu li a:hover → 1, 2, 3
• .btn 대 a:hover → A·B·C 순으로 비교해 우선순위 판정

주의사항

• 특이성 계산 결과는 참고용입니다. !important와 :where() 등 특이성을 무시하는 경우는 별도로 확인하세요.
• 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

명시도 비교 규칙

A(ID), B(클래스·속성·의사클래스), C(요소·의사요소) 순으로 비교합니다. 앞 자리 점수가 크면 뒷자리와 무관하게 우선 적용됩니다.

:is(), :not(), :where()

:where()는 명시도를 0으로 만들고, :is()와 :not()은 괄호 안 인자 중 가장 높은 명시도를 따릅니다. 인라인 스타일과 !important는 선택자보다 우선합니다.

자주 묻는 질문

우선순위는 어떻게 비교하나요?

A(ID) → B(클래스 등) → C(요소) 순으로 비교하며, 앞 자리 점수가 크면 무조건 우선합니다.

:where()는 왜 0인가요?

:where()는 명시도를 0으로 만드는 의사클래스라 안에 무엇이 들어가도 점수에 영향을 주지 않습니다.

인라인 스타일과 !important는요?

이 계산기는 선택자 명시도만 계산합니다. 인라인 스타일과 !important는 그보다 더 높은 우선순위를 가집니다.

:is()와 :not()은 어떻게 계산되나요?

두 의사클래스는 괄호 안 인자 중 가장 높은 명시도를 따릅니다.

관련 도구

• CSS 단위 변환기 - px, rem, em, %, vw, vh를 변환합니다.
• CSS 포매터 - minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.
• 색상 코드 변환기 - HEX, RGB, RGBA, HSL, HSLA 색상 코드를 서로 변환하고 색상을 미리봅니다.
• CSS clamp 생성기 - 최솟값·최댓값과 뷰포트 범위를 입력해 CSS clamp() 함수를 자동으로 생성합니다.
• Flexbox 생성기 - flex-direction, justify-content, align-items, gap 값을 조정해 Flexbox CSS를 생성합니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.