CSS 선택자의 우선순위 총정리

✅ CSS 선택자의 우선순위 총정리

🧩 1. 선택자 우선순위란?

여러 CSS 규칙이 같은 요소에 적용될 때, 어떤 규칙이 최종 적용되는지를 결정하는 기준입니다.
CSS는 이를 Specificity(특이도)라는 개념으로 판단하며, 숫자로 점수를 매겨 비교합니다.

---

🧮 2. 선택자 우선순위 계산 구조

특이도는 다음과 같은 4단계 점수로 계산합니다.

(a, b, c, d)

항목	의미	예시	점수
a	인라인 스타일	<div style="">	(1,0,0,0)
b	ID 선택자	#main	(0,1,0,0)
c	클래스 / 속성 / 가상 클래스	.menu, [type="text"], :hover	(0,0,1,0)
d	요소 / 가상 요소	div, p, ::before	(0,0,0,1)

---

🔍 3. 상황별 예시 비교

✅ 예제 1: 요소 선택자 vs 클래스 선택자

<p class="text">Hello</p>

p {
  color: blue;
}

.text {
  color: red;
}

결과: 빨간색 (red)
→ 클래스 선택자의 특이도가 더 높습니다.

---

✅ 예제 2: 클래스 선택자 vs ID 선택자

<p id="main" class="text">Hello</p>

.text {
  color: blue;
}

#main {
  color: green;
}

결과: 초록색 (green)
→ ID 선택자가 클래스보다 우선합니다.

---

✅ 예제 3: ID 선택자 vs 인라인 스타일

<p id="main" style="color: orange;">Hello</p>

#main {
  color: green;
}

결과: 주황색 (orange)
→ 인라인 스타일이 가장 우선입니다.

---

✅ 예제 4: 복합 선택자끼리 비교

<div id="wrap">
  <p class="text">Hello</p>
</div>

#wrap p {
  color: blue;
}

.text {
  color: red;
}

결과: 파란색 (blue)
→ ID 포함된 복합 선택자가 클래스보다 우선입니다.

---

✅ 예제 5: 같은 특이도, 나중에 정의된 것 우선

.text {
  color: blue;
}

.text {
  color: red;
}

결과: 빨간색 (red)
→ 나중에 정의된 규칙이 우선합니다.

---

✅ 예제 6: !important와 우선순위

<p class="text" id="main" style="color: green;">Hello</p>

#main {
  color: blue !important;
}

.text {
  color: red;
}

결과: 파란색 (blue)
→ !important가 인라인 스타일보다 우선합니다.

---

✅ 예제 7: !important끼리 충돌 → 특이도 비교

.text {
  color: red !important;
}

#main {
  color: blue !important;
}

결과: 파란색 (blue)
→ 둘 다 !important지만, 특이도가 높은 ID 선택자가 우선입니다.

---

반응형

 

📝 4. 선택자 특이도 요약 정리표

선택자 종류	예시	특이도
인라인 스타일	style=""	(1,0,0,0)
ID 선택자	#id	(0,1,0,0)
클래스 / 속성 / 가상 클래스	.class, [attr], :hover	(0,0,1,0)
요소 / 가상 요소	div, p, ::after	(0,0,0,1)
전체 선택자	*	(0,0,0,0)

---

🧠 5. 실무에서 자주 겪는 문제 해결 팁

문제 상황	해결 방법
스타일이 적용되지 않음	개발자 도구에서 실제 적용된 스타일 확인
우선순위 충돌	선택자의 특이도 점수를 비교해보기
유지보수가 어렵다	!important 남용 금지, 클래스 활용
특정 스타일만 바꾸고 싶음	명확하고 강한 선택자 또는 스코프 내 클래스 사용