I am using react-slick library, but when the third element of li is activated as above code, I want to give animation to the first element, but it doesn't work at all. What's wrong?
//JSX section
<StyledSlider {...settings}>
{rendingData.map((obj)=>
<SlideCard
key={obj.id}
src={obj.src}
title={obj.title}
description={obj.description}
titleStyle={obj.titleStyle}
descriptionStyle={obj.descriptionStyle}
/>
)}
</StyledSlider>
//styled Component section
.slick-dots li:nth-child(3).slick-active ~ li:nth-child(1) {
animation: ${move1to3} .5s forwards;
}