История изменений
Исправление theNamelessOne, (текущая версия) :
Возможно ли в css выбрать предыдущий элемент?
Нельзя, но можно сделать костыль (браузер должен поддерживать CSS flexible boxes).
Выводишь элементы контейнера на страницу в обратном порядке. Т.е. разметка должна быть такой:
<div class="container">
<div class="el2 activated"></div>
<div class="el1"></div>
</div>
Затем с помощью режима flexbox указываешь, чтобы элементы контейнера отображались в обратном порядке (минус на минус даёт плюс). Потом просто используешь adjacent selector.
demo (меняешь :hover
на свой класс):
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
/* flex-direction: row-reverse */
flex-direction: column-reverse;
}
.elem {
cursor: pointer;
}
.elem:hover {
color: green;
}
.elem:hover + .elem {
color: red;
}
</style>
</head>
<body>
<h1>Hover over items!</h1>
<ul class="container">
<li class="elem">Item 5</li>
<li class="elem">Item 4</li>
<li class="elem">Item 3</li>
<li class="elem">Item 2</li>
<li class="elem">Item 1</li>
</ul>
</body>
</html>
Исходная версия theNamelessOne, :
Возможно ли в css выбрать предыдущий элемент?
Нельзя, но можно сделать костыль (браузер должен поддерживать CSS flexible boxes).
Выводишь элементы контейнера на страницу в обратном порядке. Т.е. разметка должна быть такой:
<div class="container">
<div class="el2 activated"></div>
<div class="el1"></div>
</div>
Затем с помощью режима flexbox указываешь, чтобы элементы контейнера отображались в обратном порядке (минус на минус даёт плюс). Потом просто испльзуешь adjacent selector.
demo (меняешь :hover
на свой класс):
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
/* flex-direction: row-reverse */
flex-direction: column-reverse;
}
.elem {
cursor: pointer;
}
.elem:hover {
color: green;
}
.elem:hover + .elem {
color: red;
}
</style>
</head>
<body>
<h1>Hover over items!</h1>
<ul class="container">
<li class="elem">Item 5</li>
<li class="elem">Item 4</li>
<li class="elem">Item 3</li>
<li class="elem">Item 2</li>
<li class="elem">Item 1</li>
</ul>
</body>
</html>