Дочірнім називається елемент, який безпосередньо розташовується всередині батьківського елементу. Який елемент виступає батьком, а який його нащадком легко з'ясувати за допомогою дерева елементів - так називається структура відносин тегів документа між собою (рис. 1).
Рис. 1. Дерево елементів
На рис. 1 в зручному вигляді представлена вкладеність елементів і їх ієрархія. Тут дочірнім елементом по відношенню до тегу <div>
виступає тег <p>
. Разом з тим тег <strong>
не є дочірнім для тега <div>
, оскільки він розташований в контейнері <p>
.
Синтаксис
E>
F {Опис правил стилю}
Стиль застосовується до елементу F, тільки коли він є дочірнім для елемента E.
Приклад
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Дочірні селектори </title>
<style>
#menu {
margin: 0; padding: 0; /* Прибираємо відступи */
}
#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="undo.html">
Скасувати </a>
</li>
<li>
<a href="cut.html">
Вирізати </a>
</li>
<li>
<a href="copy.html">
Копіювати </a>
</li>
<li>
<a href="paste.html">
Вставити </a>
</li>
</ul>
</li>
<li>
Стиль
<ul>
<li>
<a href="bold.html">
Жирне </a>
</li>
<li>
<a href="italic.html">
курсивні </a>
</li>
<li>
<a href="underline.html">
Підкреслена </a>
</li>
</ul>
</li>
<li>
Розмір
<ul>
<li>
<a href="small.html">
Маленький </a>
</li>
<li>
<a href="normal.html">
Нормальний </a>
</li>
<li>
<a href="middle.html">
Середній </a>
</li>
<li>
<a href="big.html">
Великий </a>
</li>
</ul>
</li>
</ul>
</body>
</html>
В даному прикладі дочірні селектори потрібні, щоб розділити стиль елементів списку верхнього рівня і вкладені списки, які виконують різні завдання, тому стиль для них не повинен перетинатися. Результат прикладу показаний на рис. 2.
Рис. 2. Використання дочірніх селекторів
Браузери
Браузер Internet Explorer 7 не застосовує стиль, якщо між селекторами розташовується коментар ( li>
/* більше */ a ).
