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

CSS селектор следующих элементов

Селектор следующих элементов выбирает элементы, которые расположены в коде после элемента, указанного в селекторе слева:

/* Выбор всех элементов <p>, которые расположены в коде
   после элемента <div> */
div ~ p { background-color: yellow; }

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

Селектор следующих элементов состоит из трёх частей: первым указывается элемент, предшествующий целевым элементам, после него идёт общий комбинатор элементов одного уровня, представленный тильдой ( ~ ), и затем следуют целевые элементы. Комбинатор определяет взаимосвязь между двумя селекторами, показывая, что нужно выбрать все элементы <p>, следующие в коде за элементами <div>.

Между селектором и комбинатором элементов одного уровня допускается ставить пробел. Все селекторы в примере эквивалентны:

div~p { background-color: yellow; }
div~ p { background-color: yellow; }
div ~p { background-color: yellow; }
div ~ p { background-color: yellow; }

Можно использовать или опускать пробелы по своему усмотрению.

Пример

div ~ p { background-color: yellow; }
<div>
  <p>Дочерний элемент. Не будет
  выбран селектором!</p>
</div>

<p>Смежный (соседний) элемент, будет выбран селектором.</p>

<h2>Заголовок второго уровня</h2>
  
<p>Элемент следующий в коде за элементов div и имеющий
с div общего родителя (body). Будет выбран селектором!</p>

<article>
  <p>Не следует в коде за элементом div, так как
  находится внутри article. Имеет с div разных родителей.
  Не будет выбран селектором!</p>
</article>

Результат

Дочерний элемент. Не будет выбран селектором!

Смежный (соседний) элемент, будет выбран селектором.

Заголовок второго уровня

Элемент следующий в коде за элементов div и имеющий с div общего родителя (body). Будет выбран селектором!

Не следует в коде за элементом div, так как находится внутри article. Имеет с div разных родителей. Не будет выбран селектором!

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

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