Найти тему
16 подписчиков

⏭️ Соседние селекторы в 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 без всяких соседних селекторов, но хоть потренировался.

#css
Около минуты