Основной задачей, которую преследует верстальщик, является создать красивый и удобный ресурс. То, как вы оформите свой проект, будет играть большую роль в его будущем, не всем захочется долго находиться на некрасивом сайте. А при оформлении на помощь верстальщику приходят селекторы. В данной статье мы подробно глянем на один из составных селекторов.

Селектор сестринского элемента выполняет задачу выбора тэга идущего непосредственно за элементом, который был задан, если они имеют общего родителя. Записывается в виде двух элементов скомбинированных знаком «+».

Пример. Всем параграфам имеющим заголовок зададим черный цвет:

h1+p {
   color: #000;
}

Взглянем ближе на селектор сестринского элемента. Рассмотрим некоторое количество частных примеров для понимания:

CSS

img+p {
   text-decoration: underline
}

HTML

<div class=”parent”>
   <img src=”/image/img.jpg” alt=”картинка”>
   <p>Подпись картинки 1</p>
   <p>Подпись картинки 2</p>
   <a href=”#”>Ссылка на ресурс</a>
</div>

В данном случае подпись 1 будет подчеркнута, ведь она идёт сразу после картинки и все они внутри одного div. Подпись 2 подчеркнута уже не будет.

Если бы код имел вид:

HTML

<div class=”parent”>
   <p>Подпись картинки 1</p>
   <img src=”…/image/img.jpg” alt=”картинка”>
   <a href=”#”>Ссылка на ресурс</a>
   <p>Подпись картинки 2</p>
</div>

В этом случае подпись уже не будет подчёркнута, потому, что она идет за ссылкой.

Если код имеет вид:

HTML

<div class=”parent”>
   <img src=”…/image/img.jpg” alt=”картинка”>
   Имя автора
   <p>Подпись картинки</p>
   <a href=”#”>Ссылка на ресурс</a>
</div>

То на подпись также будет наложен стиль.

Элементы одного типа

В случае если этот селектор использовать для элементов одного типа то получится эффект обратный :first-child, то есть стиль не затронет первый элемент.

Например:

li+li {
   text-decoration: underline;
}
 
<ul>
   <li>Первая строка</li>
   <li>Вторая строка</li>
   <li>Третья строка</li>
</ul>

Однако обойти сестринский селектор при помощи :first-child не всегда получается, по этой причине стоит внимательно отнестись к вопросу какой из них выбирать используя однотипные элементы.

Где он поможет?

С помощью его удобно оформлять индивидуальные стили для каждой строки списка. А в целом селектор крайне специфичен и встречается не часто.