Пріоритет селекторів потомків у CSS

Розберемо, чому стиль елемента може мати більший пріоритет, ніж стиль його батьківського елемента.

Як працює пріоритет селекторів потомків

У попередніх уроках ми розглядали випадки, коли декілька селекторів вибирали один і той самий елемент.

Але може бути ситуація, коли один селектор задає стиль батьківському елементу, а інший — самому потомку.

Якщо потомку задана власна властивість, вона має більший пріоритет, ніж успадкована властивість від батька.

Приклад №1. Селектор потомка перемагає клас батька

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

.block {
  color: red;
}

p {
  color: green;
}

💡 Показати підказку

Якщо батько передає властивість через спадкування, але потомок має свою властивість — використовується стиль потомка.

Приклад №2. Селектор потомка перемагає ID батька

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

#block {
  color: red;
}

.text {
  color: green;
}

❗ Важливо:

Спадкування CSS працює тільки тоді, коли у самого елемента немає власного значення властивості.

Важливе правило

Власний стиль елемента сильніший за успадкований стиль батька.
Селектор потомка може перемогти стиль батьківського елемента.
Навіть ID батька не впливає, якщо потомок має власне значення властивості.

Практичні завдання

📌 Завдання:

№1
Визначте колір тексту:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green;
}

📌 Завдання:

№2
Визначте колір тексту:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green;
}

💡 Показати підказку

Не плутайте специфічність селектора зі спадкуванням. Якщо властивість прийшла від батька — її можна легко замінити власним стилем потомка.

✅ Показати відповідь

№1: текст буде зеленим, тому що p має власний color. №2: текст буде зеленим, тому що .text задає колір самому елементу, а #block лише передає колір через спадкування.