Статьи / Веб-разработка / CSS по шагам / Шаг 11. Дочерние селекторы
Шаг 11. Дочерние селекторыПросмотров: 1782
15.04.2009 16:30
 
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберем небольшой код (пример 11.1).

Пример 11.1. Вложенность элементов в документе

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<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>


В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений всех тегов документа между собой (рис. 11.1).


Рис. 11.1. Дерево элементов для примера 11.1

На рис. 11.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <DIV> выступает параграф <P>. Вместе с тем тег <STRONG> не является дочерним для тега <DIV>, поскольку он расположен в контейнере <P>.

Вернемся теперь к селекторам. Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий.

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

Замечание

Дочерние селекторы не поддерживаются браузером Internet Explorer.

Если снова обратиться к примеру 11.1, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег <EM> находится внутри контейнера <P>, и не даст никакого результата для второго абзаца. А все из-за того, что тег <EM> во втором абзаце расположен в контейнере <STRONG>, поэтому нарушается условие вложенности.

По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 11.2).

Пример 11.2. Контекстные и дочерние селекторы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Дочерние селекторы</title>
  <style type="text/css">
   DIV I { /* Контекстный селектор */
    color: green; /* Зеленый цвет текста */
   }
   DIV > 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 dolore magna aliguam
   erat volutpat.</p>
   </div>
  <div>
   <p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
   erat volutpat.</p>
  </div>
</body>
</html>


В данном примере курсивный текст будет отображаться зеленым цветом из-за того, что дочерний селектор указан некорректно. В стиле прописано изменить цвет текста на красный у содержимого тега <I>, но только в том случае, если он непосредственно находится внутри <DIV>. А в нашем случае тег <I> располагается внутри <P>, поэтому стиль применяться не будет. Зато будет действовать контекстный селектор, который и задает зеленый цвет.

Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 11.3 показано изменение вида списка с помощью стилей. За счет вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 11.2).


Рис. 11.2 Список в виде меню

Для размещения текста по горизонтали к селектору LI добавляется стилевой атрибут float. Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы.

Пример 11.3. Использование дочерних селекторов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.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 > LI {
    list-style: none; /* Убираем маркеры списка */
    width: 120px; /* Ширина элемента в пикселах */
    background: #ddd; /* Цвет фона */
    color: maroon; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт */
    font-size: 90%; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    float: left; /* Располагаем элементы по горизонтали */
   }
   LI > UL {
    list-style: none; /* Убираем маркеры списка */
    padding: 0px; /* Убираем отступы вокруг элементов списка */
    padding-top: 5px; /* Добавляем отступ сверху */
   }
   LI > A {
    display: block; /* Ссылки отображаются в виде блока */
    font-weight: normal; /* Нормальное начертание текста */
    font-size: 90%; /* Размер шрифта */
    background: #fff; /* Цвет фона */
    border: 1px solid #666; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
</head>
<body>
  <ul id="menu">
   <li>Редактор</li>
   <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="emphasis.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>


Автор: Влад Мержевич
Источник: htmlbook.ru