Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 22.07.2018

Наверх

Наверх

Часть 4. Соседние и родственные селекторы

В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.

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

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

Пример: допустим, вам необходимо, чтобы каждый абзац <p>, который идет первым после заголовка <h1>, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:

h1+p {
font-style: italic;
}

Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN).

Примеры написания:

/* Отступ от абзаца до картинки 30px */
p+img {
padding-top: 30px;
}

/* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */
h2+h3+p {
color: green;
}

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

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

Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев <p>, которые идут после заголовка <h1>. Код CSS будет выглядеть так:

h1 ~ p {
  font-style: italic;
}

…и немного HTML для примера:

<div>
<p>Текст</p>
<h1>Заголовок 1</h1>
<p>Текст</p>
<p>Текст</p>
<h2>Заголовок 2</h2>
<p>Текст</p>
 </div>

<div>
<p>Текст</p>
 </div>

Взгляните на HTML-код: стиль применится ко всем тегам <p>, которые следуют после тега <h1> и находятся до закрывающего тега родителя <div>. В нашем варианте насчитывается 3 элемента <p>, к которым применится стиль. Обратите внимание, что тег <h2> этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу <p>, который находится над <h1>, а также к тегу <p>, имеющему другого родителя <div>.

Выводы

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

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

Перейдя к следующей подглаве, вы познакомитесь с селекторами атрибутов.