한양과학기술고등학교

에듀테크 프로젝트 대시보드

CSS 특이성과 캐스케이드

브라우저는 한 요소에 여러 CSS 규칙이 겹칠 때, 특이성(Specificity)이라는 점수로 우선순위를 계산합니다. 점수가 같으면 소스 순서(나중에 선언된 것이 승리)가, 그리고 !important가 최종적으로 모든 것을 뒤집습니다. 이 계산과 캐스케이드(cascade) 순서를 직접 실험해 보세요.
🧮 선택자 A Specificity Calculator
📊 선택자 A 점수 (id, class, type)
0
INLINE
0
ID (#)
0
CLASS/ATTR/:hover
0
TYPE/::before
📊 선택자 B 점수
0
INLINE
0
ID (#)
0
CLASS/ATTR/:hover
0
TYPE/::before
🏆 승자 판정
A
VS
B
"⚖️ 특이성 비교하기" 버튼을 눌러보세요.
비교는 튜플을 왼쪽 자리부터 비교합니다. ID가 하나라도 많으면 class·attribute·type이 아무리 많아도 이길 수 없습니다 (자릿수 올림이 없는 진법처럼 동작).
🌊 캐스케이드 순서 실험 Live Preview

아래 4개의 규칙이 모두 같은 <button>의 배경색을 노리고 있습니다. 토글을 켜서 규칙을 "활성화"하고, 실제로 어떤 색이 이기는지 확인하세요.

1 브라우저 기본 스타일 (User Agent) — 항상 켜짐
2 button 타입 선택자 (0,0,1)
3 .btn.warn 클래스 2개 (0,2,0)
4 #save-btn ID 선택자 (1,0,0)
5 인라인 style="..." (1,0,0,0)
! .btn.warn { ... !important } — 모든 것을 뒤집음
현재 적용: 브라우저 기본값
📐 특이성 계산 규칙
① 인라인 스타일 — style="color:red". 사실상 무한대에 가까운 최상위 점수.
② ID 선택자 — #header 1개당 +1.
③ 클래스 / 속성 / 가상클래스 — .btn, [type], :hover 1개당 +1.
④ 태그 / 가상요소 — div, ::before 1개당 +1.
※ *, 결합자(> + ~ 공백), :not() 자체는 점수 0 (단, :not() 안의 선택자는 계산에 포함).
/* 특이성: (0, 1, 2) → class 1개 + type 2개 */ nav ul.menu { color: blue; } /* 특이성: (0, 1, 0) — 클래스 1개뿐 */ .menu { color: green; } /* → 위 규칙이 이김: (0,1,2) > (0,1,0) */ /* !important는 특이성을 무시하고 무조건 최우선 */ .menu { color: red !important; } /* → 위 두 규칙을 모두 이김 */
실무 팁: !important 남발은 캐스케이드를 무력화해서 나중에 디버깅을 어렵게 만듭니다. ID 선택자로 특이성을 억지로 높이는 것도 재사용성을 떨어뜨리므로, 되도록 클래스 기반 선택자 + 낮고 평평한 특이성을 유지하는 것이 좋습니다 (BEM 방법론이 이 원칙을 따릅니다).