Дочірнім називається елемент, який безпосередньо розташовується всередині батьківського елемента. Який елемент виступає батьком, а який його нащадком легко з'ясувати за допомогою дерева елементів — так називається структура відношень елементів документа між собою (рис. 1). /assets/images/css/selector_child1.png" alt="Дерево елементів" width="191" height="227">
Мал. 1. Дерево елементів
На рис. 1 у зручному вигляді представлена вкладеність елементів та їх ієрархія. Тут дочірнім елементом по відношенню до <div> виступає елемент <p>. Водночас <strong> не є дочірнім для елемента <div>, оскільки він розташований у контейнері <p>.
Синтаксис
<code>E > F { Опис правил стилю }Стиль застосовується до елемента F, тільки коли він є дочірнім для елемента E.
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <размер> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Приклад
<!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).
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Selectors Level 3 | Рекомендація |
| CSS 2.1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W 3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 7 | 8 | 12 | 1 | 3.5 | 1 | 1 |
| 1 | 1 | 4 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.