CSS 선택자 우선순위는 스타일 충돌 시 어떤 규칙이 더 강한지 결정하는 기준입니다.
우선순위는 A-B-C-D(4자리) 방식으로 계산됩니다.

✅ 1. 우선순위 점수 구조

범주 설명 예시 점수
A 인라인 스타일 <div style="color:red"> 1000
B ID 선택자 #main 100
C 클래스 / 속성 / 가상 클래스 .note, [type=text], :hover 10
D 태그 / 가상 요소 div, h1, ::before 1

✅ 2. 점수가 포함되는 모든 요소

✔ A. 인라인 스타일 (1000점)

<div style="color: red"></div>

✔ B. ID 선택자 (100점)

#main {}
#header {}

✔ C. 클래스 / 속성 선택자 / 가상 클래스 (10점)

클래스 선택자

.note {}
.active {}

속성 선택자

input[type="text"] {}
a[target="_blank"] {}

가상 클래스 (pseudo-class)

:hover
:focus
:nth-child(2)
:checked

:not() 주의

  • :not() 자체는 점수 없음
  • 괄호 내부는 계산됨
:not(.active)   /* = 클래스 10점 */

✔ D. 태그 선택자 + 가상 요소 (1점)

태그

div
span
ul li

가상 요소

::before
::after
::placeholder

❌ 3. 점수 없는 요소

요소 점수 설명
* 0 전체 선택자
> + ~ 0 결합자(combinator)
:where() 0 명시적으로 우선순위 0
선택자 연결을 위한 공백 0 계산 대상 아님

✨ 4. :is() / :not() / :where() 동작 정리

✔ :is() → 괄호 안에서 가장 높은 것만 계산

:is(.a, #b)   /* #b → 100점 */

✔ :not() → 괄호 안 내용만 계산

:not(.active)   /* 10점 */

✔ :where() → 항상 0점

:where(.box, #id)   /* 0점 */

📘 5. 우선순위 계산 예제

1) ul#list li.note:hover

선택자 점수
#list 100
.note 10
:hover 10
ul 1
li 1

총점 = 122점

2) div::before

  • div = 1
  • ::before = 1
    → 총 2점

3) a[href][target=_blank]:hover

  • a = 1
  • [href] = 10
  • [target] = 10
  • :hover = 10

총점 = 31점

🎯 6. 최종 요약

범주 점수 포함 요소
A 1000 인라인 스타일
B 100 ID
C 10 클래스, 속성, 가상 클래스
D 1 태그, 가상 요소
0점 0 *, 결합자, :where()