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

Селектор обобщенных родственных элементов (СОРЭ) — это инструмент помогающий выбирать элемент или элементы, идущие следом за заданным. На практике он выглядит в виде цепочки из заданного и выбираемого элемента, соединённых между собой знаком «~». Стоит отметить, что он будет работать только при наличии у элементов общего родителя.

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

.content p~ul {
   margin-left: 30px;
}

Взглянем на селектор обобщённых родственных элементов более детально.

СОРЭ, является одним из новых селекторов, он впервые встречается в 3-ей спецификации CSS, и охватывает все элементы, идущие непосредственно за тем, который в цепочке пишется первым. Это единственное, что отличает его от сестринского, который выбирает только один элемент.

Рассмотрим это на примере:

CSS

p~span {
   color: red;
}

HTML

<span>Текст стандартного цвета</span>
<p> Текст стандартного цвета </p>
<span> Текст красного цвета </span>
<span> Текст красного цвета </span>
<div class=”intext”>
   <span> Текст стандартного цвета </span>
</div>
<span> Текст красного цвета </span>

Следовательно, все span, идущие после «p» будут красного цвета, кроме того, который внутри div class=”intext”, потому, что у него разный родитель с «p».

Стоит отметить

При использовании этого селектора нужно быть крайне аккуратным, поскольку его применение не всегда очевидно, да и Internet-Explorer шестой версии его не воспринимает.

Где его можно встретить?

Селектор в меру своей новизны, крайне специфичен, а на практике встречается очень редко. Поэтому область, в которой он бы мог привнести весомое значение придумать очень сложно.