4.7. Выбор сестринских элементов

В каскадных таблицах стилей существуют селекторы, позволяющие выбирать следующий элемент за текущим, имеющего того же родителя. Такие элементы называются сестринскими. Например, если нужно выделить первый абзац, следующий за заголовком h1, то можно применить такой селектор:

h1 + p {padding: 10px; background: f7f7f7;}

Такая запись будет указывать браузеру найти на странице все заголовки с тегом <h1> и применить стиль только для первого найденного абзаца <p>, следующего за этим заголовком:

<h1>Заголовок 1</h1>
<p>Первый абзац, следующий за заголовком 1<p>
<p>Второй абзац, следующий за заголовком 1<p>

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

Обратите внимание, что в отличии от выбора первого дочернего элемента, сестринские элементы находятся на одном уровне иерархии, т.е. имеют единого родителя. В предыдущем примере заголовок h1 и параграф p имеют единого родителя body. Если это условие не выполняется, то соответствующий сестринский элемент найден не будет.

В CSS допускается комбинировать селекторы разных типов, например, выбор дочерних и сестринских элементов. Следующая запись позволяет выбрать сестринский элемент span у первого дочернего элемента p тега div:

div > p + span {color: red}

Следует отметить, что селекторы выбора дочерних и сестринских элементов поддерживаются браузером Internet Explorer, начиная с версии 7.0