перший параграф в div
другий параграф в div
Просто напівжирний текст в divперший параграф в body
Батьківський елемент - тег, який містить в собі розглянутий елемент.
У прикладі відносини батько-дитина:
- Елемент div (2 рядок) - батьківський по відношенню до тегу h1 (3 рядок), тоді як h1 - навпаки, дочірній елемент (дитина)
- Елемент p (4 рядок) є батьківським по відношенню до strong (4 рядок), тоді як strong - навпаки, дочірній елемент (дитина)
- Елемент div (2 рядок) є батьківським по відношенню до strong (6 рядок), тоді як strong - навпаки, дочірній елемент (дитина)
- Елемент p (8 рядок) є батьківським по відношенню до strong (8 рядок), тоді як strong - навпаки, дочірній елемент (дитина)
- Елемент body (1 рядок) є батьківським по відношенню до div (2 рядок) і p (8 рядок)
Предок - елемент, який розташовується на кілька рівнів вище і містить в собі розглянутий елемент.
У прикладі ставлення предок-нащадок:
- Елемент body є предком для елементів h1 (3 рядок), p і strong (4 рядок), p і strong (5 рядок), strong (6 рядок) і strong (8 рядок); в той час як всі, перераховані елементи є нащадками body
- Елемент div (2 рядок) є предком для елементів strong (4 і 5 рядок); в той час як strong є нащадком для div
Братський елемент (сусідній) - елемент, який має загальний батьківський елемент з даним.
У прикладі ставлення сусіди (брати):
- Елементи h1 (3 рядок), p (4 рядок), p (5 рядок) і strong (6 рядок) є братами або сусідніми елементами.
- Елементи div (2 рядок) і p (8 рядок) є братами або сусідніми елементами.
Контекстні селектори CSS (предки-нащадки)
Правила контекстних селекторів також поширюються і на відношення батько-дитина.