Как обратиться к соседним селекторам?
<div class="list"> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> </div> |
<div class="list"> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> <div class="list__item"></div> </div>
Есть такой список. Хочу при ховере на среднем чтоб применялись стили на предыдущих и на следующих.
К последующим вопросов нету, а вот предыдущие
В ютубчике недавно видел реализация на чистом с помощью :has или :not, не могу найти тот видос...
Может кто помнит в чем там магия заключалась?
Дополнительно:
Можно проще:
snippet
- не рановато :has использовать на полную? В FireFox поддержка появилась только пару месяцев назад (в декабре 2023)
- Сергей delphinpro,
Лично я думаю что рановато, есть альтернативные решения.
Как раз на эту тему недавно видео записалБез has :
https://codepen.io/pershinvitalii/pen/gOEdYbj
https://codepen.io/pershinvitalii/pen/MWxqJMX
https://codepen.io/pershinvitalii/pen/ZEPMaxr
https://codepen.io/pershinvitalii/pen/MWxqOqQС has:
https://codepen.io/pershinvitalii/pen/rNRrXLb
https://codepen.io/pershinvitalii/pen/JjzBgvX
https://codepen.io/pershinvitalii/pen/gOEjVzo - ветка FF esr вообще на 115 версии сейчас вместо 122 и там Has тоже нет
так что да, рановато это все еще
https://codepen.io/smashingmag/pen/rNrpymj вопрос снят...
- Отмечайте решением, даже если сам нашли, можно несколько ответов сразу.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для обращения к соседним селекторам в CSS можно использовать комбинаторы. Один из самых часто используемых комбинаторов для обращения к соседним элементам - это символ "+". Этот символ позволяет выбрать элемент, который непосредственно следует за указанным элементом.
Пример использования комбинатора "+":
.element1 + .element2 { /* стили для .element2, который идет сразу за .element1 */ }
Если вам нужно обратиться к соседнему элементу, который идет перед указанным элементом, можно использовать комбинатор "~". Этот комбинатор выберет все элементы, которые идут после указанного элемента и имеют тот же родительский элемент.
Пример использования комбинатора "~":
.element1 ~ .element2 { /* стили для всех .element2, которые идут после .element1 */ }
Также можно использовать комбинатор ">" для обращения к дочерним элементам определенного элемента. Этот комбинатор выберет только те элементы, которые являются непосредственными дочерними элементами указанного элемента.
Пример использования комбинатора ">":
.parent > .child { /* стили для .child, который является непосредственным дочерним элементом .parent */ }
Таким образом, используя сочетание различных комбинаторов, можно легко обращаться к соседним элементам и управлять их стилями в CSS.