LINUX.ORG.RU

История изменений

Исправление 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>