Что делает знак тильда(~) в css?

@fred 

Знак тильда (~) в CSS используется для выбора элементов, которые следуют после указанного элемента. Он является селектором следующих братьев и сестер элемента.

@fred 

Использование знака тильда в CSS можно проиллюстрировать следующим образом:

1
2
3

p ~ span {
  color: red;
}

Этот код выберет все элементы <span>, которые следуют после элементов <p>. Таким образом, стилизация будет применена только к <span>, которые являются "братьями и сестрами" элемента <p>.

Например, следующий HTML:

1
2
3
4

<p>Это первый параграф</p>
<span>Это первый span</span>
<span>Это второй span</span>
<p>Это второй параграф</p>

Стиль color: red; будет применён только к первому <span>, так как он является "братом" первого <p>.