Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

Соседние селекторы CSS или как их еще называют селекторы-родственники, позволяют применить стили к элементу в тех случаях, когда он стоит в HTML-коде перед определенным элементом, то есть элементы в данном случае должны находиться на одном уровне вложенности. Соседние селекторы тоже являются составными и складываются из простых селекторов (классов, идентификаторов и т.д.).

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

<тег1>
 <тег2>...</тег2>
 <тег3><тег4>...</тег4></тег3>
 <тег5><тег6>...</тег6></тег5>
</тег1>

В этом примере есть всего две пары соседних элементов — это <тег2> и <тег3>, а также <тег3> и <тег5>, все. То есть <тег2> и <тег5> уже не являются соседями по отношению друг к другу., так как между ними стоит <тег3>.

Соседние селекторы образуются из двух или более обычных селекторов разделенных между собой знаком "+" (плюс), где сначала указывается самый первый элемент в коде, затем тот, который стоит за ним, потом тот, который стоит сразу за вторым и так далее. Как обычно, стили применяются к тому элементу, селектор которого находится последним в списке. Общий синтаксис.

селектор1 + селектор2 { свойство: значение; свойство: значение; ... }

Пробелы с обоих сторон знака "+" можно ставить, а можно и нет, по желанию.

Пример использования соседних селекторов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Соседние селекторы</title>
  <style type="text/css">
   h1 + p {
    color: red; /* красный цвет текста параграфа, когда он соседний с H1 */
   }
   p > em + strong {
    text-decoration: underline; /* подчеркнутый текст у STRONG, когда он соседний с EM,
                                   который, в свою очередь, является дочерним у P */
   }
   h1 + p + div {
    color: green; /* зеленый цвет текста внутри DIV, когда он стоит сразу
                     после P, который стоит сразу после H1 */
   }
  </style>
 </head>
 <body>
  <h1>Заголовок</h1>
  <p>Текст. <strong>Strong.</strong> Текст. <em>Em.</em></p>
  <p>Текст. <em>Em.</em> Текст. <strong>Strong.</strong></p>
  <div>Текст. <em>Em.</em> Текст. <strong>Strong.</strong></div>
 </body>
</html>

Результат в браузере

Заголовок

Текст. Strong. Текст. Em.

Текст. Em. Текст. Strong.

Текст. Em. Текст. Strong.

В этом примере только первый параграф с красным текстом и только <STRONG> второго параграфа подчеркнут, так как больше никакие элементы не соответствуют правилам заданных стилей. В частности, содержимое элемента <DIV> в данном случае не будет зеленого цвета, так как его от заголовка отделяет не один, а два параграфа. Кстати, как вы видите, во втором стиле были указаны сразу соседний и дочерний селекторы. Так я решил еще раз напомнить вам о том, что селекторы разных типов можно свободно объединять.

Браузер Internet Explorer 6.0 не понимает соседние селекторы (как и дочерние). Помните об этом.

Домашнее задание.

  1. Создайте на странице обычный двухколоночный макет с меню. Пусть у элементов списка меню будут макеры-изображения.
  2. Сделайте так, чтобы, если после тега заголовка <H2> сразу идет идет изображение, то оно всплывает влево.
  3. Создайте блок с размерами 200 на 200 пикселей и поставьте его по центру основной колонки. Внутри него поместите блок в 50 на 50 пикселей. Используя свойство position сделайте так, чтобы внутренний блок отступал от внешнего блока снизу на 20px, а слева на 20%.
  4. Не забудьте раскрасить все вами созданное хозяйство в какие-нибудь цвета, чтобы хорошо видеть результат.
Дочерние селекторы← Содержание →Псевдоклассы
Учебник CSS