Соседние, родственные и дочерние селекторы в CSS

Соседние селекторы

Соседними называются элементы web-страницы, когда они следуют непосредственно друг за другом в коде документа. Синтаксис:

P + H { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами P и H. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу H, но только в том случае, если он является соседним для элемента P и следует сразу после него. Рассмотрим пример:

<html>
 <head>
  <meta charset="utf-8">
 <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Стиль при такой <b>записи</b> применяется к <i>элементу</i> H</p>
   <p>Но только в том случае, если он <i>является</i> соседним для элемента P и следует сразу после него.</p>
 </body>
</html>

Родственные селекторы

Родственные селекторы (сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне).

Данные селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~. Рассмотрим пример:

<html>
 <head>
  <meta charset="utf-8">
 <title>Родственные селекторы</title>
<style>
h1 ~ p {
  font-style: italic; /* Наклонный шрифт для всех абзацев */
}
</style>
 </head>
 <body>
<div>
<p>Текст</p>
<h1>Заголовок 1</h1>
<p>Текст</p>
<p>Текст</p>
<h2>Заголовок 2</h2>
<p>Текст</p>
 </div>
<div>
<p>Текст</p>
 </div>
 </body>
</html>

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

Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Синтаксис:

P > H { Описание правил стиля }

Стиль применяется к элементу H, только когда он является дочерним для элемента P. Рассмотрим пример:

<html>
<head>
	<title>Дочерние селекторы</title>
	<style>
		p>b { color: red; }
		p>i { color: blue; }
	</style>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

В данном примере тег <i>, в первом абзаце вложен в тег <p>, а во втором он вложен в тег <u>, хотя также является потомком тега <p>. Поэтому во втором абзаце CSS правило для дочернего селектора p>i { color: blue; } не сработает — наклонный текст второго абзаца не будет отображён синим цветом.

2023-11-18 00:37 Самоучитель по CSS