Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

CSS комбинатор элемент+элемент

Поддержка браузерами

7.0+

Описание

Комбинатор соседних сестринских элементов используется для выбора определённого элемента, который размещается в коде непосредственно после другого элемента.

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

Рассмотрим, как это работает на небольшом примере:

 div + p { color: blue; }

Таким образом мы указали, что стиль будет применён ко всем элементам <p>, которые расположены в коде непосредственно после элементов <div>.

Между комбинатором соседних сестринских элементов и селекторами допускается ставить пробел, он никак не повлияет на работу комбинатора:

Пример:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      div + p { background-color: yellow; }
    </style>
  </head>

  <body>

    <div>
      <p>Этот абзац расположен внутри элемента &lt;div&gt;.</p>
    </div>
	
    <p>Этот абзац является соседним сестринским элементом по отношению
	к элементу &lt;div&gt;.</p>
	
	<p>Ещё один абзац, однако он не является соседним по отношению к
	элементу &lt;div&gt;.</p>

  </body>
</html>

Результат данного примера:

Этот абзац расположен внутри элемента <div>.

Этот абзац является соседним сестринским элементом по отношению к элементу <div>.

Ещё один абзац, однако он не является соседним по отношению к элементу <div>.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen