html - change color of nth child with css or jquery -

i using slick slider, structure this:

<div class="slick-track">   <ul>     <li class="slick slick-active"></li>     <li class="slick slick-active"></li>     <li class="slick slick-active"></li>     <li class="slick"></li>     <li class="slick"></li>     <li class="slick"></li>     <li class="slick"></li>     <li class="slick"></li>    <ul> </div> 

it shows 3 slides @ time. i.e. when next slide shown 2,3,4 li gets slick-active class

what want select middle element active , change background color.

i have tried doing doesn't work

.slick-track .slick-active:nth-child(odd) {     background: red; }  .slick-track .slick-active:nth-child(even) {     background: green; } 

or

.slick-track .slick-active:nth-child(2) {     background: red; } 

it counts li , select off betn them

edit when next slide comes visible html looks this

here problem .slick-track .slick-active:nth-child(odd) if use selects odd li in li elements

<div class="slick-track">       <ul>         <li class="slick"></li>         <li class="slick slick-active"></li>         <li class="slick slick-active"></li>         <li class="slick slick-active"></li>         <li class="slick"></li>         <li class="slick"></li>         <li class="slick"></li>         <li class="slick"></li>        <ul>     </div> 

you can try:

.slick-active + .slick-active + .slick-active {     background-color: initial; }  .slick-active + .slick-active {     background-color: red; }