Faux Previous Sibling

by Rogier

HTML

<div class=container>
  <span class=box>first</span>
  <span class=box>second</span>
  <span class=box>third</span>
  <span class=box>fourth</span>
</div>

CSS

.container {
  display: inline-block;
  direction: rtl;
}
.box {
  display: inline-block;
  width: 4em;
  text-align: center;
  line-height: 3em;
  background: #ef9;
}
.box:hover + .box {
  background: #f9e;
}