CSS по шагам

       

Использование соседних селекторов


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<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>. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 10.2). Вид остальных абзацев останется неизменным.



Содержание раздела