Соседние селекторы

В данном примере происходит изменение цвета текста для содержимого контейнера <i>, когда он располагается сразу после контейнера <b>. В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег <i>, но по соседству никакого тега <b> нет, так что стиль к этому контейнеру не применяется.

Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путем и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовем его sic, и станем применять его к тегу <h2>. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 1.38). Вид остальных абзацев останется неизменным.

Пример 1.38. Изменение стиля абзаца XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Изменение стиля абзаца</title>

<style type="text/css"> H2.sic {

font-size: 140%; /* Размер шрифта */ color: maroon; /* Цвет текста */

font-weight: normal; /* Нормальное начертание текста */ margin-left: 30px; /* Отступ слева */

}margin-bottom: 0px; /* Отступ снизу */

H2.sic + P {

background: #ddd; /* Цвет фона */ margin-left: 30px; /* Отступ слева */ margin-top: 0.5em; /* Отступ сверху */

}padding: 7px; /* Поля вокруг текста */

</style>

</head>

<body>

<h1>Методы ловли льва в пустыне</h1> <h2>Метод последовательного перебора</h2>

<p>Пусть лев имеет габаритные размеры L x W x H, где L - длина льва от кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2L x 2W. Благодаря этому мы избежим ошибки, когда в клетке

окажется пойманным лишь половина льва или, что хуже, только его хвост.</p> <h2 class="sic">Важное замечание</h2>

<p>Для упрощения расчетов хвост в качестве погрешности измерения можно отбросить и не принимать во внимание.</p>

<p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.</p>

</body>

</html>

Результат данного примера показан на рис. 1.23.

Рис. 11.2. Изменение вида абзаца за счет использования соседних селекторов

В данном примере текст отформатирован с применением абзацев (тег <p>), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега <h2>, у которого добавлен класс sic.

Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <h1> и <h2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов. Аналогично дело обстоит и для идущих подряд тегов <h2> и <p>, а также в других подобных случаях. В примере 1.39 таким манером изменяется величина отступов между указанными тегами.

Пример 1.39. Отступы между заголовками и текстом XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Соседние селекторы</title>

<style type="text/css"> H1 + H2 {

}margin-top: -10px; /* Смещаем заголовок 2 вверх */

H2 + P {

}margin-top: -1em; /* Смещаем первый абзац вверх к заголовку */

</style>

</head>

<body>

<h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <p>Абзац!</p>

</body>

</html>

Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения у свойства margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу.

Дочерние селекторы

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

(пример 1.40).

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>

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

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

На данном рисунке в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <div> выступает тег <p>. Вместе с тем тег <strong> не

является дочерним для тега <div>, поскольку он расположен в контейнере <p>.

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

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

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

Если снова обратиться к примеру 1.40, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег <em> находится внутри контейнера <p>, и не даст никакого результата

для второго абзаца. А все из-за того, что тег <em> во втором абзаце расположен в контейнере <strong>, поэтому нарушается условие вложенности.

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

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

Пример 1.41. Контекстные и дочерние селекторы XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Дочерние селекторы</title>

<style type="text/css">

DIV I { /* Контекстный селектор */ }color: green; /* Зеленый цвет текста */

P > I { /* Дочерний селектор */ }color: red; /* Красный цвет текста */

</style>

</head>

<body>

<div>

<p>Известно, что пустыня обладает неправильной формой, которую принимаем прямоугольной. Это достигается одним из двух способов — <i>включением частей</i>, выходящих за пределы области пустыни или их <i>отбрасыванием</i>.</p>

</div>

</body>

</html>

Результат данного примера показан на рис. 1.25.

Рис. 1.25. Цвет текста, заданный с помощью дочернего селектора

На тег <i> в примере действуют одновременно два правила: контекстный селектор (тег <i> расположен внутри <div>) и дочерний селектор (тег <i> является дочерним по отношению к <p>). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.

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

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

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

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

Пример 1.42. Использование дочерних селекторов XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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="#">Отменить</a></li> <li><a href="#">Вырезать</a></li> <li><a href="#">Копировать</a></li> <li><a href="#">Вставить</a></li>

</ul>

</li> <li>Начертание

<ul>

<li><a href="#">Жирное</a></li> <li><a href="#">Курсивное</a></li> <li><a href="#">Подчеркнутое</a></li>

</ul>

</li> <li>Размер

<ul>

<li><a href="#">Маленький</a></li> <li><a href="#">Нормальный</a></li> <li><a href="#">Средний</a></li>

<li><a href="#">Большой</a></li>

</ul>

</li>

</ul>

</body>

</html>

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