Заисимость стиля элемента от предыдущего
 

Приветствую, гуру js)

Подскажите, как можно сделать стиль одного элемента зависимым от другого. Например, есть вот такая конструкция:

<div class="ok" style="opacity:0;">1</div> 
<div class="ok" style="opacity:1;">2</div> 
<div class="ok" style="opacity:1;">3</div>

Можно ли как-то сделать, что если у первого элемента opacity: 1, то последующим двум присвоить стили bottom: 40px (второму) и bottom: 80px (третьему), а если у первого opacity:0 (как сейчас в примере выше указано) , то bottom: 0 второму и bottom: 40px третьему?

samdo, ты лучше расскажи какой эффект хочешь получить в итоге... А то, может, ты роешь подземный ход на чердак. ;)

Эти элементы - это всплывающие сообщения, которые появляются и через несколько секунд исчезают (присваивается стиль opacity:0). Цель такая, что если появляется одновременно 2 или 3 сообщения, то они не должны наслаиваться друг на друга а распологаться один под другим. Загвоздка в том, что если каждое последующее сообщение появляется тогда, когда у другого уже присвоился opacity: 0, то оно расположено выше чем нужно и в итоге может появиться не слева внизу (position: fixed;left: 20px;bottom:20px), а слева посередине, поэтому и нужна зависимость, что если у первого opacity: 0, то у второго bottom: 20px не меняется, а если он еще не успел перейти в opacity: 0, то расположить второй элемент над ним, т.е. bottom: 40px

Помимо прозрачности можно еще менять размеры... Тогда элементы будут располагаться где нужно...

Это я все к тому, что нет селектора ЦСС, который бы определялся по свойствам ЦСС другого элемента.
Посему, придется тебе придумывать другие решения по стилям. Или писать программки...

samdo,
скрыли/открыли элемент, прошли циклом по видимым, присвоили bottom i * 20 ;

Вот вот... такое решение и ищется

в чём проблема?

В написании скрипта, который такой цикл реализует.

samdo,
информации недостаточно а цикл будет такой ...

divs.forEach((div, i) => div.style.bottom = `${i * 20}px`)