Соседние селекторы
Соседними называются элементы 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; } не сработает — наклонный текст второго абзаца не будет отображён синим цветом.