✔Соседние селекторы - A + B

23 марта 2016 2 705 Справочник CSS 1

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
7.0	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

Синтаксис

E + F { Описание правил стиля

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.

Lorem ipsum dolor sit amet.

Тег является дочерним по отношению к тегу , поскольку он находится внутри этого контейнера. Соответственно выступает в качестве родителя .

Lorem ipsum dolor <var>sit</var> amet.

Теги <var> и никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера , не влияет на их отношение.

Lorem ipsum dolor sit amet, consectetuer adipiscing <tt>elit</tt>.

Соседними здесь являются теги и , а также и <tt>. При этом и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер .

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   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>

Результат данного примера показан на рис..;1.

Рис. 1. Красный цвет текста для соседних селекторов