При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.
<Тег1>
<Тег2> ... </Тег2>
</Тег1>
Использование контекстных селекторов продемонстрировано в примере 1.
Пример 1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>
</body>
</html>
В данном примере показано обычное применение тега <b> и этого же тега, когда он вложен внутрь абзаца <p>, при этом меняется цвет и шрифт текста.
рис. 1.
Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.
Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса, как показано в примере 2.
Пример 2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
color: green; /* Зеленый цвет текста для всех ссылок */
}
.menu {
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
background: #fc0; /* Цвет фона */
}
.menu A {
color: navy; /* Темно-синий цвет ссылок */
}
</style>
</head>
<body>
<div class="menu">
<a href="1.html">Основы HTML</a> |
<a href="2.html">Основы HTML 5</a> |
<a href="3.html">Основы CSS</a> |
<a href="3.html">Основы CSS 3</a>
</div>
<p><a href="text.html">Другие материалы по теме</a></p>
</body>
</html>
рис. 2.
В данном примере используется два типа ссылок. Первая ссылка, стиль которой задается с помощью селектора A, будет действовать на всей странице, а стиль второй ссылки (.menu A) применяется только к ссылкам внутри элемента с классом menu.
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.
<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 и следует сразу после него.
В примере 3 показана структура взаимодействия тегов между собой.
Пример 3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p>Inter <b> quae</b> verbum emicuit si forte decorum, <i>et si versus paulo</i> concinnior unus et alter, venditque poema.</p>
<p>Hos ediscit et hos arto stipata theatro spectat Roma potens; <i>habet hos numeratque poetas </i> ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.</p>
</body>
</html>
рис. 3.
В данном примере происходит изменение цвета текста для содержимого контейнера <i>, когда он располагается сразу после контейнера <b>. В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег <i>, но по соседству никакого тега <b> нет, так что стиль к этому контейнеру не применяется.
Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путем и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовем егоsic, и станем применять его к тегу <h2>. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 4). Вид остальных абзацев останется неизменным.
Пример 4.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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>Чтобы сделать свое царствование более эффективным, Луи XIV
решил сделать себе дом рядом со столицей, но не в ней самой.
Поэтому он выбрал Версаль, где его отец Луи XIII построил
охотничий домик. Это маленькое сооружение было превращено
в самый большой замок в мире. Работа над ним началась в1661г
и была завершена более чем через тридцать лет. Огромные ресурсы
были доступны архитекторам, художникам и садовникам, в результате
чего они смогли сделать это место достойным "Короля Солнце."</p>
<h2 class="sic">Примечание</h2>
<p>Король и его двор переехали во дворец в 1672г, когда там еще шли
строительные работы.</p>
<p>Шедевр Французского Классицизма, Версаль
послужил моделью для огромного количества королевских резиденций
построенных в Европе во все последующие века. Сегодня первое, что
вы видите, когда подходите к дворцу - это три прекрасных внутренних
двора, которые символически притягивают ваш взгляд к Королевским
Покоям, в то время как восточные фасады обращены к парку и великолепным
садам, простирающимся на 580 метров (635 ярдов).</p>
</body>
</html>
рис. 4.
В данном примере текст отформатирован с применением абзацев (тег <p>), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега <h2>, у которого добавлен класс с именем sic.
Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <h1> и <h2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов. Аналогично дело обстоит и для идущих подряд тегов <h2> и <p>, а также в других подобных случаях. В примере 5. таким манером изменяется величина отступов между указанными тегами.
Пример 5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
margin-top: -10px; /* Смещаем заголовок 2 вверх */
}
H2 + P {
margin-top: -1em; /* Смещаем первый абзац вверх к заголовку */
}
</style>
</head>
<body>
<h1>Версаль</h1>
<h2>Немного истории</h2>
<p>Чтобы сделать свое царствование более эффективным, Луи XIV
решил сделать себе дом рядом со столицей, но не в ней самой.
Поэтому он выбрал Версаль, где его отец Луи XIII построил
охотничий домик. Это маленькое сооружение было превращено
в самый большой замок в мире. Работа над ним началась в1661г
и была завершена более чем через тридцать лет. Огромные ресурсы
были доступны архитекторам, художникам и садовникам, в результате
чего они смогли сделать это место достойным "Короля Солнце."</p>
<h2 class="sic">Примечание</h2>
<p>Король и его двор переехали во дворец в 1672г, когда там еще шли
строительные работы.</p>
<p>Шедевр Французского Классицизма, Версаль
послужил моделью для огромного количества королевских резиденций
построенных в Европе во все последующие века. Сегодня первое, что
вы видите, когда подходите к дворцу - это три прекрасных внутренних
двора, которые символически притягивают ваш взгляд к Королевским
Покоям, в то время как восточные фасады обращены к парку и великолепным
садам, простирающимся на 580 метров (635 ярдов).</p>
</body>
</html>
рис. 5.
Так как при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения у свойства margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу.
