2

I am making pagination buttons.

I want the hovered li to be highlighted, and I also want the li adjacent to it to have some style.

I can manage to get the next sibling to be highlighted, is there a way to select the previous one?

Or if there is an idiomatic way to achieve it?

* {
  margin: 0;
  padding: 0;
}

ul {
  counter-reset: lis;
  display: flex;
}

ul li {
  counter-increment: lis;
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #aaa;
  border-radius: 32px;
  transform: scale(0.5);
  transition: all .3s;
  cursor: pointer;
}

ul li::before {
  content: counter(lis);
}

ul li:hover {
  background-color: #369;
  transform: scale(1);
}

/* how do I also select the preivious element? */
ul li:hover + * {
  background-color: #69b;
  transform: scale(0.75);
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Hao Wu
  • 17,573
  • 6
  • 28
  • 60
  • https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector – Phix Sep 25 '20 at 02:18
  • Guess I have to wait till [`:has`](https://drafts.csswg.org/selectors-4/#relational) comes out and do something like `li:has(+ li:hover)` – Hao Wu Sep 25 '20 at 02:21
  • You could brute force it with javascript and just use element ids to change the styles. it's not elegant but it would work. :/ – user13456653 Sep 25 '20 at 02:26
  • 1
    unoptimized brute force method: https://jsfiddle.net/jcsuaqy1/ – user13456653 Sep 25 '20 at 02:39

0 Answers0