Соседними называются
элементы веб-страницы, когда они следуют непосредственно друг
за другом в коде документа. Рассмотрим несколько примеров
отношения элементов.
<p>Lorem ipsum <b>dolor</b> sit amet.</p>
Тег <B> является дочерним
по отношению к тегу <P>, поскольку он находится внутри
этого контейнера. Соответственно <P> выступает в качестве
родителя <B>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var>
amet.</p>
Теги <VAR> и <B> никак
не перекрываются и представляют собой соседние элементы. То,
что они расположены внутри контейнера <P>, никак не
влияет на их отношение.
<p>Lorem <b>ipsum </b> dolor sit amet,
<i>consectetuer</i> adipiscing <tt>elit</tt>.</p>
Соседними здесь являются теги <B>
и <I>, а также <I> и <TT>. При этом <B>
и <TT> к соседним элементам не относятся из-за того,
что между ними расположен контейнер <I>.
Для управления стилем соседних элементов
используется символ плюса (+), который устанавливается между
двумя селекторами. Общий синтаксис следующий.
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны,
стиль при такой записи применяется к Селектору 2, но только
в том случае, если он является соседним для Селектора 1 и
следует сразу после него.
Соседние
селекторы не поддерживаются браузером Internet Explorer.
В примере ниже показана структура
взаимодействия тегов между собой.
<!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">
B + I {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet,
<i>consectetuer</i> adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, <i>consectetuer</i>
adipiscing elit.</p>
</body>
</html>
В данном примере происходит изменение
цвета текста для содержимого контейнера <I>, когда он
располагается сразу после контейнера <B>. В первом абзаце
такая ситуация реализована, поэтому слово «consectetuer» в
браузере отображается красным цветом. Во втором абзаце, хотя
и присутствует тег <I>, но по соседству никакого тега
<B> нет, так что стиль к этому контейнеру не применяется.
Разберем более практичный
пример. Часто возникает необходимость в текст статьи включать
различные сноски и примечания. Обычно для этой цели создают
новый стилевой класс и применяют его к абзацу, таким способом
можно легко изменить вид текста. Но мы пойдем другим путем
и воспользуемся соседними селекторами. Для выделения замечаний
создадим новый класс, назовем его sic, и станем применять
его к тегу <H2>. Первый абзац после такого заголовка
выделяется цветом фона и отступом (пример ниже). Вид остальных
абзацев останется неизменным.
<!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">
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>
В данном примере текст отформатирован
с применением абзацев (тег <P>), но запись H2.sic +
P устанавливает стиль только для первого абзаца идущего после
тега <H2>, у которого добавлен класс с именем sic.
Соседние селекторы удобно
использовать для тех тегов, к которым автоматически добавляются
отступы, чтобы самостоятельно регулировать величину отбивки.
Например, если подряд идут теги <H1> и <H2>, то
расстояние между ними легко регулировать как раз с помощью
соседних селекторов. Аналогично дело обстоит и для идущих
подряд тегов <H2> и <P>, а также в других подобных
случаях. В примере ниже таким манером изменяется величина
отступов между указанными тегами.
<!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">
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. При этом текст поднимается
вверх, ближе к предыдущему элементу.
|
