# Дочірні селектори

/Internet Explorer | /Netscape | /Opera | /Safari | /Firefox
6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0
Ні | Помилки | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

### Опис

Дочорнимо називається елемент, який безпосередньо розташовується усередині батьківського елементу. Який елемент виступає батьком, а який його нащадком легко з'ясувати за допомогою дерева елементів - так називається структура стосунків тегів документу між собою (мал. 1).

Мал. 1. Дерево елементів

На мал. 1 в зручному виді представлена вкладеність елементів і їх ієрархія. Тут дочірнім елементом по відношенню до тега <DIV> виступає тег <P>. В той же час тег <STRONG> не являється дочорнимо для тега <DIV>, оскільки він розташований в контейнері <P>.

### Синтаксис

E > F { Опис правил стилю }

Стиль застосовується до елементу F, тільки коли він являється дочорнимо для елементу E.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

    <html>

      <head>

        <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

        <title>Дочірні селекторы</title>

        <style type="text/css">

          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="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).