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

CSS селекторы

Значение и применение

Использование селектора следующих элементов (элемент 1 ~ элемент 2) позволяет выбрать все элементы 2, которые следуют сразу же за элементом 1 (смежные элементы), а также все элементы 2, которые находятся на одном уровне вложенности (сестринские элементы, или другое название - соседние).

Этот селектор чаще всего называют селектором смежных элементов и элементов одного уровня, или селектором следующих элементов.

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
element ~ elementcss34.03.59.63.27.012.0

CSS синтаксис:

element ~ element {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Перед нами стоит задача стилизовать все абзацы (элементы <p>), которые следуют сразу за элементом <h2> и элементы <p>, которые являются сестринскими по отношению к друг другу (они выделены оранжевым цветом на изображении):

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

Обратите внимание, что элементы считаются сестринскими если они расположены на одном уровне в пределах одного родителя.


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

h2~p {
блок объявлений;
}

Кроме того, нам необходимо по особенному стилизовать все элементы, которые являются сестринскими для элемента <div> (элементы <h2> и <p>). Для этого нам необходимо использовать селектор следующих элементов с универсальным селектором:

div~* {
блок объявлений;
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор смежных элементов</title>
<style>
h2~p { /* выбираем все элементы <p> смежные и сестринские для <h2> */
background-color: lightblue; /* задаём цвет заднего фона */
color: red; /* задаём цвет текста */
}
div~* { /* выбираем все сестринские элементы <div> */
font-style: italic; /* устанавливаем курсивное начертание шрифта */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
}
</style>
</head>
	<body>
		<div>
			<h2>Заголовок внутри div</h2>
			<p>Абзац один</p>
			<p>Абзац два</p>
		</div>
		<h2>Заголовок внутри body</h2>
		<p>Абзац один</p>
	</body>
</html> 

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

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

Пример использования селектора следующих элементов.
Пример использования селектора следующих элементов.
CSS селекторы