Братский селектор

видео

Воспроизвести видео

~ тильда, или «селектор братских элементов»

Данный селектор выбирает все элементы после выбранного, внутри родителя. Проще говоря: выбирает все элементы после выбранного.

Для того, что бы понять как он работает, пропишу следующий код:

<div class="block-1">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

Пять spanов пронумеровал для видимости. Далее выберу третий из них и изменю в нем цвет текста:

.block-1 span:nth-child(3) {
  color: brown;
}

Теперь выберу «братские элементы» и им так же поменяю цвет текста:

.block-1 span:nth-child(3) ~ span {
  color: chocolate;
}

На данном этапе прекрасно видно, что этот селектор выбирает четвертый и пятый span, но для новичка может быть вопрос, почему третий не шоколадного цвета? Ответ простой: данный селектор его не выбирает. Убедиться в этом может помочь пара действий:

• убрать цвет текста у третьего элемента: в таком случае у него цвет текста будет чёрным
• добавить «братским элементам» фоновый цвет

Я выберу «фоновый цвет», для того что бы позднее показать еще один момент.

.block-1 span:nth-child(3) ~ span {
  color: chocolate;
  background-color: antiquewhite;
}

Теперь прекрасно видно, что выбраны именно следующие элементы. Осталось продемонстрировать ещё один момент: будут ли выбраны spanы внутри четвертого и пятого? Для этого, внутрь пятого, я добавлю еще один span внутрь пятого и всем spanам добавлю фоновый цвет:

 <div class="block-1">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span> 5
    <span>5.1</span>
  </span>
</div>
<style>
  .block-1 span {
    background-color: aliceblue;
  }
  .block-1 span:nth-child(3) {
    color: brown;
  }
  .block-1 span:nth-child(3)~span {
    color: chocolate;
    background-color: antiquewhite;
  }
</style>

Ниже уже реальный пример, не скрин: на нем прекрасно видны все мелочи о которые может споткнуться новичок, в том числе видно, что spanу внутри пятого не применился фон «братского селектора».