css 선택자 우선순위

---

🤔 선택자 우선순위

css의 선택자 우선순위는 스타일 규칙이 어떤 요소에 적용될지 결정하는 중요한 개념이다.

우선순위위는 ID 선택자, 클래스 선택자, 태그 선택자의 수의 점수를 계산하여 결정되며, 점수가 높은 선택자의 스타일 규칙이 우선순위가 높다.

만약 점수가 같다면? 가장 마지막에 선언된 스타일이 우선순위가 된다.

✅ 선택자 점수 결정

• !important : 무한 점수

div {
	font-size: 2rem !important;
}
div {
	font-size: 1rem;
}

속성 값 옆에 !important가 붙은 스타일 규칙은 다른 모든 규칙보다 우선순위가 높다.

하지만 !important는 가능한 사용하는 것을 피하자 유지보수를 어렵게 만들고, 스타일 적용을 예상하기 힘들다.

• 인라인 스타일 : 1000점

<div style="font-size: 2rem"></div> 

div {
	font-size: 1rem;
}

HTML 요소에 직접 적용된 인라인 스타일은 !important를 제외한 모든 스타일 규칙보다 우선순위가 높다.

• ID 선택자 : 100점

#main {
	font-size: 1rem;
}

ID 선택자는 클래스 선택자, 속성 선택자, 태그 선택자보다 우선순위가 높e다.

• 클래스 선택자, 가상 클래스 선택자 : 10점

.main {
	fonst-size: 1rem;
}

:hover {
	display: none;
}

클래스 선택자는 태그 선택자보다 우선순위가 높다.

• 태그 선택자, 가상 요소 태그 : 1점

div {
	font-size: 1rem;
}

::before {
	content: "text";
}

태그 선택자는 전체, 부정 선택자 보다 우선순위가 높고 클래스 선택자 보다 우선순위가 낮다.

• 전체 선택자, 부정 선택자 : 0점

* {
	color: red;
}

:not(p) {
	color: red;
}

전체, 부정 선택자는 가장 낮은 우선순위를 가진다.

---

👌 우선순위 계산

위 우선순위 점수를 토대로 우선순위를 계산하여 점수가 가장 높으면 우선순위가 가장 높다.

div {}

태그 선택자(1) = 1점

#main div {}

ID 선택자(100) + 태그 선택자(1) = 101점

#main .main div {}

ID 선택자(100) + 클래스 선택자(10) + 태그 선택자(1) = 111점

#main .main:hover {}

ID 선택자(100) + 클래스 선택자(10) + 가상 클래스 선택자(10) = 120점

div p::after {}

태그 선택자(1) + 태그 선택자(1) + 가상 요소 선택자(1) = 3점

---