CSS-тереңдік селекторларының басымдығы

Алдыңғы барлық сабақтарда барлық селекторлар элементтің өзін ұстауы керек еді. Бір селектор элементті ұстап, ал екінші селектор сол элементтің әкесін ұстауы мүмкін.

Сіз бұған дейін білесіз, егер әкеге, мысалы, түс берілсе, онда бұл түс тереңдікке мирасқа өтеді. Бірақ, егер тереңдікке де түс берілсе, онда тереңдік селекторы әке селекторынан жоғарырақ басымдыққа ие болады.

Бұл тереңдік тег селекторы әкенің класын жеңетінін білдіреді:

<div class="block">
	<p>мәтін</p>
</div>

.block {
	color: red;
}
p {
	color: green; /* бұл түс қолданылады */
}

Тереңдік тег селекторы сондай-ақ әкенің идентификаторын жеңеді:

<div id="block">
	<p class="text">мәтін</p>
</div>

#block {
	color: red;
}
.text {
	color: green; /* бұл түс қолданылады */
}