분류: 개발 도구
CSS 우선순위 계산기
선택자 우선순위를 A-B-C 점수로 비교
하나 이상의 CSS 선택자를 입력하면 ID-클래스-요소(A-B-C) 점수로 우선순위를 계산하고, 어떤 규칙이 이길지 알 수 있도록 정렬해 보여줍니다. 모든 처리는 브라우저 안에서 이루어집니다.
| 선택자 | 우선순위(A-B-C) | ID | 클래스, 속성, 가상 클래스 | 요소, 가상 요소 |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
두 CSS 규칙이 같은 요소를 가리킬 때는 나중에 작성된 쪽이 아니라 우선순위가 더 높은 쪽이 적용됩니다. 우선순위는 세 개의 숫자로 계산됩니다. A는 ID 선택자, B는 클래스·속성 선택자·가상 클래스, C는 요소 선택자와 가상 요소입니다. 이 도구는 입력한 각 선택자를 :not(), :is(), :has(), 그리고 우선순위가 0인 :where()까지 포함해 분석하고 A-B-C 점수를 알려주므로, 추측 대신 선택자를 직접 비교할 수 있습니다.
사용 방법
- #nav .item > a:hover 처럼 한 줄에 하나씩 선택자를 입력합니다.
- 각 선택자의 A-B-C 우선순위 점수를 확인합니다.
- 우선순위 순으로 정렬해 어떤 선택자가 충돌에서 이길지 확인합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 제 CSS가 어딘가로 업로드되나요?
- 아니요. 분석은 페이지에서 실행되는 JavaScript로 이루어지므로, 비공개 스타일시트의 선택자가 기기 밖으로 나가지 않습니다.
- :not(), :is(), :has()는 어떻게 점수가 매겨지나요?
- CSS 명세에 따라 이들은 인자 중 가장 우선순위가 높은 것의 점수를 가져오며, :where()는 내부에 무엇이 있든 항상 0점입니다.
- 인라인 스타일이나 !important도 이 점수에 영향을 주나요?
- 아니요. 이 도구는 선택자만 채점합니다. 인라인 style 속성과 !important는 A-B-C 점수에 더해지는 것이 아니라 일반적인 우선순위 자체를 완전히 무시하고 적용됩니다.