Часть 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>.
Выводы
Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
Перейдя к следующей подглаве, вы познакомитесь с селекторами атрибутов.
