Селектори нащадків та дочірні селектори

Селектори нащадків

«Нащадками» елемента HTML називаються будь-які вкладені в нього елементи: це його «діти» (тобто безпосередньо вкладені), діти його дітей, і так далі, углиб ієрархії тегів. Правильно використовуючи селектори, можна варіативно застосувати CSS стилі до потрібних елементів, пославшись на їх батьківський елемент. Для цього перед селектором шуканого елемента треба вставити селектори його «предків», розділивши їх пробілом:

Наприклад, всі елементи всередині тега body є дочірніми по відношенню до нього. Якщо для body в стилях задати колір тексту червоним, то колір всіх інших елементів теж стане червоним.


Ще приклад: тег ul є батьківським по відношенню до вкладених в нього тегів li. Якщо задати для ul шрифт курсивом, то і усередині всіх li шрифт стане курсивним.

Приклад запису селектору нащадків:

#footer li a {font-weight:bold; }

У наведеному прикладі селектор нащадків вказує на всі гіперпосилання (елементи A) вкладені в списки (елементи LI), у свою чергу знаходяться всередині елемента з ідентифікатором footer. У всіх таких гіперпосилань  змінюється товщина шрифту на bold (напівжирний шрифт).


Селектори дітей (дочірні селектори)

«Дітьми» або «дочірніми елементами» елемента HTML називаються безпосередньо вкладені в нього елементи, він для них є «батьківським» елементом. Елементи, що знаходяться на 2-му і глибших рівнях вкладеності, «дітьми» не є - це діти дітей, тобто «нащадки».
CSS дозволяє  створити селектор для вибору дочірніх елементів будь-якого елементу і змінити їх властивості, застосувавши CSS стилі. Для цього перед селектором шуканого елемента треба вставити селектори його «предків», розділивши їх знаком >.

i > b {font-weight:normal; }

В наведеному прикладі буде знайдено всі елементи b, вкладені безпосередньо в елементи i, та ввімкнено  для них напівжирний шрифт. Всі інші елементи B в документі залишаться без змін.

Приклад дерева елементів:


Дочірній селектор в дереві елементів знаходиться завжди безпосередньо всередині батьківського елементу

Тег em є дочірнім для p, тому що розміщується безпосередньо всередині нього.


Дочірній елемент <em> до тега   p буде відображено зеленим кольором! А елемент <em> що є дочірнім для тега <strong> НЕ відобразиться зеленим кольором!

Результат дії css-правила якщо  прибрати символ  дочірності елемента >:


Завдання для самостійного виконання:

Завдання 1.  У файлі за посиланням доповнити css- правило, яке призведе до такого результату:
 


Завдання 2: Створити файл з css-правилами оформлення дочірніх елементів, в результаті дії якого буде отримано:

підказка для правильного написання css-правила у ієрархічності  тегів: