Шаг 11. Дочерние селекторы
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберем небольшой код (пример 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 Transitional//EN">
<html>
<head>
<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 Transitional//EN">
<html>
<head>
<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>