На цьому уроці ми познайомимося з селекторами відносин, які використовуються для того щоб вибрати елементи в залежності від того як вони пов'язані з іншими елементами на веб-сторінці.
Види відносин між елементами
Кожен елемент на веб-сторінці може бути пов'язаний з іншим елементом за допомогою одного з наступних відносин:
- батьківський елемент, прямий предок - елемент який містить один або кілька вкладених в нього елементів. По відношенню до цих вкладеним в нього елементів він є для них батьком;
- дочірній елемент, прямий нащадок, дитина, дитя - елемент, який вкладений в батьківський елемент і по відношенню до нього є дочірнім елементом, тобто його дитиною;
- сусідній елемент, сиблинг (брат або сестра) - елементи, у яких один загальний батько. Такі елементи по відношенню один до одного є сиблингами (сусідами).
Розглянемо наступний приклад:
Даний код можна представити у вигляді такої схеми:
У вищенаведеному прикладі виберемо елемент p і розглянемо, як він пов'язаний з іншими елементами в коді:
- Батьківський елемент - div;
- Сусідній елемент - h1;
- Прямі нащадки, діти - елементи strong. em.
Елемент1 Елемент2
У цьому селекторі елемент1 і елемент2 пов'язані між собою відношенням "предок нащадок". Тобто він використовується для вибору елементов2. які розташовані всередині елемента1 в HTML документі. Іншими словами, він вибирає все елементи2. які є нащадками елемента1.
Наприклад вибрати і встановить стиль кожному елементу p. який є нащадком елемента div:
Елемент1> Елемент2
У цьому селекторі елемент1 і елемент2 пов'язані між собою відношенням "батько> дитина". Тобто він використовується для вибору елементов2. які є дітьми елемента1. Іншими словами, він вибирає все елементи2. які мають в якості безпосереднього батька елемент1.
Наприклад вибрати і встановить стиль кожному елементу p. у якого батько є елементом div:
Елемент1 + Елемент2
Селектор Елемент1 + Елемент2 призначений для вибору елементов2. які розташовані відразу ж після елемента1. і є вони по відношенню один до одного сусідами. Іншими словами, даний селектор використовується для вибору елемента2. який розташований відразу ж після елемента1. і при цьому вони повинні мати одного і того ж батька в HTML документі.
Наприклад вибрати і встановить стиль кожному елементу p. який розташований відразу ж після елемента div. Причому вибрати потрібно тільки ті елементи p. які знаходяться на тому ж рівні вкладеності, що і елементи div. тобто вони повинні бути по відношенню один до одного сусідами:
Елемент2 призначений для вибору елементов2. які розташовані після елемента1. і є вони по відношенню один до одного сусідами. Іншими словами, даний селектор використовується для вибору елементов2. які розташовані після елемента1. і при цьому вони повинні мати одного і того ж батька в HTML документі.
Наприклад вибрати і встановить стиль кожному елементу p. який розташований після елемента div. Причому вибрати потрібно тільки ті елементи p. які знаходяться на тому ж рівні вкладеності, що і елементи div. тобто вони повинні бути по відношенню один до одного сусідами: