How to get the next element after the .active class

Question

Trying to get next element after li.active class

I am trying to get the next element after the .active element with css, the element that gets the .active class, is the first list-item of the 'Lightslider'.

I've tried the code below:

.lslide.active +  li:nth-child(1) {
  -ms-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

Is this possible with only CSS?

Thanks.

Answer 1

Just use the adjacent sibling selector +, you don't need the nth-child selector:

.active + li {
  color: red;
}

<ul>
  <li class="active">Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>