Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Селектор сестринского элемента в CSS

Дата:15.05.15 в 10:48
Раздел: 

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

Селектор сестринского элемента CSS

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

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

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 не всегда получается, по этой причине стоит внимательно отнестись к вопросу какой из них выбирать используя однотипные элементы.

Примечания

Internet-explorer 6 не понимает сестринский селектор, следовательно если вы его используете в своей верстке, то ваш проект не везде будет отображаться корректно.

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

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

Оценок: 1 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)