CSS only target higher elements with lower ones

In this example you can see a CSS only solution to targeting "previous sibling" elements.

by mkdizajn

HTML

<h3>Hover the squares</h3>

<div class="top"></div>

<div class="lower-element"></div>
<div class="lower-element"></div>
<div class="lower-element"></div>
<div class="lower-element"></div>
<div class="lower-element"></div>

CSS

.top {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
  color: red;
}
.top ~ .lower-element {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.top ~ .lower-element:hover {
  background-color: lightblue;
}

.lower-element {
  height: 5em; width: 5em;
}

.top ~ .lower-element:hover ~ .lower-element {
  background-color: green;
}