Селекторы элементов одного уровня

Последнее обновление: 21.04.2016

Селекторы элементов одного уровня или смежных элементов позволяют выбрать элементы, которые находятся на одном уровне вложенности. Иногда такие элементы еще называют сиблинги (siblings) или сестринскими элементами. Например:

<body>
	<h2>Заголовок</h2>
	<div>
		<p>Текст первого блока</p>
	</div>
	<div>
		<p>Текст второго блока</p>
	</div>
</body>

Здесь элементы h2 и оба блока div являются смежными, так как находятся на одном уровне. А элементы параграфов и заголовок h2 не являются смежными, так как параграфы вложены в блоки div.

Чтобы стилизовать первый смежный элемент по отношению к определенному элементу, используется знак плюса +:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			h2+div { color: red; }
        </style>
    </head>
    <body>
		<h2>Заголовок</h2>
		<div>
			<p>Текст первого блока</p>
		</div>
		<div>
			<p>Текст второго блока</p>
		</div>
    </body>
</html>

Селектор h2+div позволяет определить стиль (в данном случае красный цвет текста) для блока div, который идет непосредственно после заголовка h2:

Селекторы смежных элементов в CSS3

Причем этот селектор будет стилизовать блок div, если он будет идти непосредственно после заголовка. Если же между заголовком и блоков div будет находиться еще какой-либо элемент, то к нему не будет применяться стиль, например:

<h2>Заголовок</h2>

<p>Элемент между заголовком и блоком div</p>

<div>
	<p>Текст первого блока</p>
</div>

Если нам надо стилизовать вообще все смежные элементы одного уровня, неважно непосредственно идут они после определенного элемента или нет, то в этом случае вместо знака плюса необходимо использовать знак тильды "~":

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			h2~div { color: red; }
        </style>
    </head>
    <body>
		<h2>Заголовок</h2>
		<p>Аннотация</p>
		<div>
			<p>Текст первого блока</p>
		</div>
		<div>
			<p>Текст второго блока</p>
		</div>
    </body>
</html>
Стилизация элементов одного уровня в CSS

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850