LINUX.ORG.RU

Предыдущий элемент css

 


0

2

Возможно ли в css выбрать предыдущий элемент? Например есть конструкция

<div class="container">
   <div class="el1"></div>
   <div class="el2 ativated"></div>
</div>

Нужно выбрать el1 если у el2 есть класс activated.


Ответ на: комментарий от cinyflo

потому что не хочется переопределять внутрянку фреймворка

kote
() автор топика

Нельзя.

anonymous
()

Возможно ли в 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 ★★★★★
()
Последнее исправление: theNamelessOne (всего исправлений: 1)
Ответ на: комментарий от theNamelessOne

А если тебе нужны все предыдущие элементы, то можно и без вывода в обратном порядке обойтись.

theNamelessOne ★★★★★
()
Последнее исправление: theNamelessOne (всего исправлений: 1)
21 мая 2017 г.
Ответ на: комментарий от filequest

почему же нельзя, можно конечно $('.ativated').prev() и на событие или че там у Вас.

grantorin
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.