Дочірнім називається елемент, який безпосередньо розташовується всередині батьківського елементу. Щоб краще зрозуміти відносини між елементами документа, розберемо невеликий код (приклад 12.1).
Приклад 12.1. Вкладеність елементів в документі
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Lorem ipsum </title> </head> <body> <div class="main"> <p> <em> Lorem ipsum dolor sit amet </em > ;, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> <p> <strong> <em> Ut wisis enim ad minim veniam </em> </strong > ;, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </div> </body> </html>
В даному прикладі застосовується кілька контейнерів, які в коді розташовуються один в іншому. Найбільш наочно це видно на дереві елементів, так називається структура відносин тегів документа між собою (рис. 12.1).
На рис. 12.1 в зручному вигляді представлена вкладеність елементів і їх ієрархія. Тут дочірнім елементом по відношенню до тегу <div> виступає тег <p> . Разом з тим тег <strong> не є дочірнім для тега <div> , оскільки він розташований в контейнері <p> .
Повернемося тепер до селекторам. Дочірнім селектором вважається такою, що в дереві елементів знаходиться прямо всередині батьківського елементу. Синтаксис застосування таких селекторів наступний.
Селектор 1> Селектор 2 {Опис правил стилю}
Стиль застосовується до селектора 2, але тільки в тому випадку, якщо він є дочірнім для селектора 1.
Якщо знову звернутися до прикладу 12.1, то стиль виду P> EM {color: red} буде встановлений для першого абзацу документа, оскільки тег <em> знаходиться всередині контейнера <p> , і не дасть ніякого результату для другого абзацу. А все через те, що тег <em> у другому абзаці розташований в контейнері <strong> , тому порушується умова вкладеності.
За своєю логікою дочірні селектори схожі на селектори контекстні. Різниця між ними така. Стиль до дочірнього селектору застосовується тільки в тому випадку, коли він є прямим нащадком, іншими словами, безпосередньо розташовується всередині батьківського елементу. Для контекстного селектора ж допустимо будь-який рівень вкладеності. Щоб стало зрозуміло, про що йде мова, розберемо наступний код (приклад 12.2).
Приклад 12.2. Контекстні і дочірні селектори
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Дочірні селектори </title>
<style>
div I { /* Контекстний селектор */ color: green; /* Зелений колір тексту */ } P>
I { /* Дочірній селектор */ color: red; /* Червоний колір тексту */ } </style>
</head>
<body>
<div>
<p>
<i>
Lorem ipsum dolor sit amet </i > ;, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet <i>
dolore magna </i>
aliguam erat volutpat. </p>
</div>
</body>
</html>
Результат даного прикладу показаний на рис. 12.2.
На тег <i> в прикладі діють одночасно два правила: контекстний селектор (тег <i> розташований всередині <div> ) і дочірній селектор (тег <i> є дочірнім по відношенню до <p> ). При цьому правила є рівносильними, оскільки всі умови для них виконуються і не суперечать один одному. У подібних випадках застосовується стиль, який розташований в коді нижче, тому курсивний текст відображається червоним кольором. Варто поміняти правила місцями і поставити div I нижче, як колір тексту зміниться з червоного на зелений.
Зауважимо, що в більшості випадків від додавання дочірніх селекторів можна відмовитися, замінивши їх контекстними селекторами. Однак використання дочірніх селекторів розширює можливості по управлінню стилями елементів, що в підсумку дозволяє отримати потрібний результат, а також простий і наочний код.
Найзручніше застосовувати зазначені селектори для елементів, які мають ієрархічною структурою — сюди відносяться, наприклад, таблиці і різні списки. У прикладі 12.3 показано зміна виду списку за допомогою стилів. За рахунок вкладення одного списку в інший отримуємо різновигляд меню. Заголовки при цьому розташовуються горизонтально, а набір посилань — вертикально під заголовками (рис. 12.3).
Для розміщення тексту по горизонталі до селектора LI додається стильова властивість float . Щоб при цьому розділити між собою стиль горизонтального і вертикального списку і застосовуються дочірні селектори (приклад 12.3).
Приклад 12.3. Використання дочірніх селекторів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Дочірні селектори </title>
<style>
UL #menu {margin: 0; padding: 0; /* Прибираємо відступи */ } UL #menu>
LI {list-style: none; /* Прибираємо маркери */ width: 100px; /* Ширина елемента в пікселах */ background: #b3d9d2; /* Колір фону */ color:#333; /* Колір тексту */ padding: 5px; /* Поля навколо тексту */ font-family: Arial, sans-serif; /* Рубаний шрифт */ font-size: 90%; /* Розмір шрифту */ font-weight: bold; /* Жирне накреслення */ float: left; /* Маємо елементи по горизонталі */ } LI>
UL {list-style: none; /* Прибираємо маркери */ margin: 0; padding: 0; /* Прибираємо відступи навколо елементів списку */ border-bottom: 1px solid #666; /* Межа внизу */ padding-top: 5px; /* Додаємо відступ зверху */ } LI>
A {display: block; /* Посилання відображаються у вигляді блоку */ font-weight: normal; /* Нормальне накреслення тексту */ font-size: 90%; /* Розмір шрифту */ background: #fff; /* Колір фону */ border: 1px solid #666; /* Параметри рамки */ border-bottom: none; /* Прибираємо рамку знизу */ padding: 5px; /* Поля навколо тексту */ } </style>
</head>
<body>
<ul id="menu">
<li>
Правка <ul>
<li>
<a href="#">
Скасувати </a>
</li>
<li>
<a href="#">
Вирізати </a>
</li>
<li>
<a href="#">
Копіювати </a>
</li>
<li>
<a href="#">
Вставити </a>
</li>
</ul>
</li>
<li>
Начертание <ul>
<li>
<a href="#">
Жирне </a>
</li>
<li>
<a href="#">
курсивні </a>
</li>
<li>
<a href="#">
Підкреслена </a>
</li>
</ul>
</li>
<li>
Розмір <ul>
<li>
<a href="#">
Маленький </a>
</li>
<li>
<a href="#">
Нормальний </a>
</li>
<li>
<a href="#">
Середній </a>
</li>
<li>
<a href="#">
Великий </a>
</li>
</ul>
</li>
</ul>
</body>
</html>
В даному прикладі дочірні селектори потрібні, щоб розділити стиль елементів списку верхнього рівня і вкладені списки, які виконують різні завдання, тому стиль для них не повинен перетинатися.
Питання для перевірки
1. Який колір буде у жирного курсивного тексту в коді
<p> Норми освітленості побудовані на <b> <i> основі класифікації зорових робіт </i> < ;/b> за певними кількісними ознаками. </p>
При використанні наступного стилю?
P {color: green; } B {color: blue; } I {color: orange; } B> I {color: olive; } P> I {color: yellow; }
- Зелений.
- Синій.
- Помаранчевий.
- Оливковий.
- Жовтий.
2. Який елемент є батьківським для тега <TITLE> ?
- <HEAD>
- <BODY>
- <HTML > ;
- <META>
- <!DOCTYPE>
3. Для якого тега елемент <!DOCTYPE> виступає батьком?
- <HTML>
- <TITLE>
- <BODY>
- <HEAD>
- Ні для одного тега.
Відповіді
1. Оливковий.
2. <HEAD>
3. Ні для одного тега.