Не следует в коде за элементом div, так как находится внутри article. Имеет с div разных родителей. Не будет выбран селектором!
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). Будет выбран селектором!