CSS 하위 선택자 우선순위

이전 모든 강의에서 모든 선택자는 해당 요소 자체를 선택해야 했습니다. 한 선택자는 요소를 선택하고, 다른 선택자는 그 요소의 부모를 선택하는 상황이 있을 수 있습니다.

부모에 예를 들어 색상이 지정되면 그 색상은 하위 요소에 상속된다는 것을 이미 알고 계실 것입니다. 하지만, 하위 요소에도 색상이 지정된 경우, 하위 요소의 선택자가 부모의 선택자보다 더 높은 우선순위를 갖습니다.

이는 하위 요소의 태그 선택자가 부모의 클래스를 이긴다는 것을 의미합니다:

<div class="block">
	<p>text</p>
</div>

.block {
	color: red;
}
p {
	color: green; /* 이 색상이 적용됨 */
}

하위 요소의 태그 선택자는 부모의 ID도 이깁니다:

<div id="block">
	<p class="text">text</p>
</div>

#block {
	color: red;
}
.text {
	color: green; /* 이 색상이 적용됨 */
}