⏭️ Соседние селекторы в CSS

Сегодня утром прилетает баг - у элемента не виден горизонтальный скрол. Случилось это из-за новой фичи - появился новый компонент, из-за чего соседний немного съехал и скрол ушёл за пределы экрана.

Тут я подумал, что в первый раз в жизни смогу использовать “Родственные селекторы” ~, чтобы пофиксить стили если оба элемента отображаются на странице:

 
.new-feature-element ~ .element-with-scroll {
     // тут фиксим стили, они применяются к .element-with-scroll
}

Посмотрел на разметку, понял что .element-with-scroll всегда идёт непосредственно после .new-feature-element поэтому можно поменять на +:

 
.new-feature-element + .element-with-scroll {
     // тут фиксим стили, они применяются к .element-with-scroll
}

Основные различия + и ~:

• + выбирает только один элемент, который непосредственно следует за первым элементом.
• ~ выбирает все элементы, которые следуют за первым элементом, но не обязательно сразу за ним.

Посмотрел на разметку ещё раз и понял, что элементы видны всегда, а не по условию, поэтому просто пофиксил стили для .element-with-scroll без всяких соседних селекторов, но хоть потренировался.