Xiper

Селектор обобщенных родственных элементов

Автор: Александр Головко Дата публикации:

Предыдущая статья Селектор сестринского элемента.

Описание селектора:

  • Выполняемая задача — выбор элемента (элементов), идущего после другого заданного элемента и имеющего с ним общего родителя.
  • Обозначение — цепочка: простой селектор элемента, комбинатор «~», простой селектор выбираемого элемента.
  • Пример использования:

задаем отступ красной строки всем абзацам, которые следуют после h1:

h1 ~ p {
	text-indent: 20px;
}

Подробнее про селектор обобщенных родственных элементов

В отличие от сестринского селектора, который выбирает только элемент идущий непосредственно за заданным, селектор обобщенных родственных элементов выбирает все элементы, которые идут после заданного. Например, применяем фрагмент CSS, приведенный выше к такому коду:

<p>Текст без отступа</p>
<h1>Очень полезная статья</h1>
<p>Текст с отступом</p>
<p>Текст с отступом</p>
<div>
	<p>Текст без отступа</p>
</div>
<p>Текст с отступом</p>

Результат предсказуемый. Все абзацы, которые идут после h1 получат отступ. Само собой, это не касается абзаца, расположенного внутри div (строка 6), ведь он не имеет с h1 общего родителя.

Ограничение

Как и в случае с сестринским селектором, IE6 не поймет селектор обобщенных родственных элементов.

Область применения

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

Следующая статья — скоро будет.