CSS 특정성 계산기
CSS 선택자를 입력하면 ID·클래스·타입 선택자 개수로 특정성(specificity)을 계산하고, 두 선택자 중 어느 쪽이 우선 적용되는지 비교합니다.
선택자 A 특정성
(1, 2, 1)
A가 더 우선 적용됩니다
ID 선택자1개 — #nav
클래스·속성·가상클래스2개 — .item :hover
타입·가상요소1개 — a
선택자 B 특정성(0, 0, 4)
ID 선택자0개 — 없음
클래스·속성·가상클래스0개 — 없음
타입·가상요소4개 — nav ul li a
사용 방법
- 1선택자 A에 특정성을 알고 싶은 CSS 선택자를 입력합니다.
- 2다른 선택자와 비교하고 싶으면 선택자 B에도 입력합니다.
- 3(ID, 클래스류, 타입류) 3단계 특정성과, 어느 쪽이 우선 적용되는지 확인합니다.
자주 묻는 질문
선택자를 세 등급으로 나눠 각각 개수를 셉니다 — ①ID 선택자(#foo), ②클래스(.foo)·속성([foo])·가상클래스(:hover), ③타입(div)·가상요소(::before). (ID, 클래스류, 타입류) 순서로 비교해 앞 등급이 하나라도 많으면 뒤 등급이 아무리 많아도 무조건 이깁니다 — 즉 ID 1개는 클래스 100개보다 항상 강합니다.
네. :not()·:is()·:has()는 괄호 안에 쉼표로 나열된 선택자 중 특정성이 가장 높은 것을 그대로 더합니다. 예를 들어 :not(#a, .b)는 #a가 더 세므로 ID 1개로 계산됩니다. 반대로 :where()는 안에 무엇이 들어있든 항상 0으로 계산됩니다.
특정성이 완전히 같으면 CSS 소스 코드에서 나중에 나오는 규칙(캐스케이드 순서)이 이깁니다. !important가 붙은 선언은 특정성과 무관하게 이 계산과 별개로 최우선 적용되며, 인라인 style 속성도 선택자가 아니라 이 계산에 포함하지 않습니다.
알아두면 좋은 점
- W3C Selectors 명세의 표준 특정성 규칙을 구현했습니다. 전체 선택자(*)와 결합자(공백 > + ~)는 특정성에 영향을 주지 않습니다.
함께 보면 좋은 도구
색 대비 검사텍스트 색과 배경 색의 명도 대비를 계산해 WCAG 접근성 기준(AA·AAA)을 통과하는지 확인합니다.정규식 테스트정규식 패턴과 텍스트를 입력하면 어느 부분이 매치되는지 바로 하이라이트로 보여줍니다.다운로드 시간 계산파일 크기와 인터넷 속도를 입력하면 다운로드에 걸리는 예상 시간을 계산합니다.메타태그 생성제목·설명·이미지 URL을 입력하면 SEO·오픈그래프·트위터 카드 메타태그를 한 번에 생성합니다.문자 인코딩 변환텍스트를 UTF-8 바이트로 바꾸거나, 16진수 바이트를 EUC-KR 등 다양한 인코딩으로 해석해 깨진 글자를 확인합니다.
마지막 검증: 2026년 8월 28일 · 결과는 참고용 추정치입니다.