Помогите составить css selector выбора одного из детей

Question

Не получатся составить css selector

Есть div контейнер с дочерними элементами:

<div className="slick">
  <div className="slick-slide slick-cloned" />
  <div className="slick-slide slick-cloned" />
  <div className="slick-slide slick-cloned" />
  <div className="slick-slide slick-active slick-current" /> 
  /* ! */<div className="slick-slide slick-active" /> /* НЕ МОГУ ДОБРАТЬСЯ ДО ЭТОГО ЭЛЕМЕНТА (следующий после slick-current) */
  <div className="slick-slide slick-active" />
  <div className="slick-slide" />
  <div className="slick-slide" />
</div>

Нужно выбрать сл. элемент, который идет за классом slick-current (и закрасить его фон красным цветом).

При том что slick-current и следующие за ним slick-active смешаются в позиции списка по направлению вниз.

Потом все повторяется.

P.S. Этот html генерируется компонентом react-slick
P.S.S. Спасибо ;)

Answer 1

.slick-slide {
  min-height: 10px;
  margin-bottom: 5px;
  background-color: gray;
}

.slick-current {
  background-color: green;
}

.slick-current + .slick-slide {
  background-color: red;
}

<div class="slick">
    <div class="slick-slide slick-cloned"></div>
    <div class="slick-slide slick-cloned"></div>
    <div class="slick-slide slick-cloned"></div>
    <div class="slick-slide slick-active slick-current">Текущий</div>
    <div class="slick-slide slick-active"></div>
    <div class="slick-slide slick-active"></div>
    <div class="slick-slide"></div>
    <div class="slick-slide"></div>
</div>

БЛОГ НА HUSL

Помогите составить css selector выбора одного из детей

Ответы (1 шт):