slick slider - :nth-child not working on slick slider

Question

I am trying to apply different border-color for each slick item and then repeat itself the ( border-color ) but it's not working. The moment I put the slick on it, it only applies the first border-color which in this case is red.

<div class="slider">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
  <div></div> 
  <div></div> 
</div>

.slider {
  display: flex;
  gap: 20px;
  flex-direction: row;
}

.slider > div {
    height: 50px;
    width: 50px;
    background-color: blue;
  }

.slider > div:nth-child(5n+1) {
  border: 5px solid red;
}
.slider > div:nth-child(5n+2) {
  border: 5px solid orange;
}
.slider > div:nth-child(5n+3) {
  border: 5px solid yellow;
}
.slider > div:nth-child(5n+4) {
  border: 5px solid pink;
}
.slider > div:nth-child(5n+5) {
  border: 5px solid green;
}

$('.slider').slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 1,
  speed: 300,
  variableWidth: true
});

Answer 1

Slick is going to wrap those <div> elements in its own structure. So, what was:

<div class="slider">
  <div> 1 </div>
  <div> 2 </div>
  …
</div>

… will end up looking more like:

<div class="slider slick-initialized slick-slider">
  <div aria-live="polite" class="slick-list draggable">

    <div class="slick-track" role="listbox">  
      <div class="slick-slide">
        <div> 1 </div>
      </div>
      <div class="slick-slide">
        <div> 2 </div>
      </div>
      …
    </div>
  </div>
</div>

So, the direct-descendent selector .slider > div will end up applying to the .slick-list element, instead of your original slides.

To style your slides the way you want, you'll have to edit your selector(s) to accommodate Slick's rendered structure.

.slider > div { … }
.slider > div:nth-child(5n+1) { … }

… would have to be something like:

.slider .slick-slide > div { … }
.slider .slick-slide:nth-child(5n+1) > div { … }

Keep in mind that the .slick-slide elements are the ones that have the common parent — there is only ever one of your original <div> elements per .slick-slide, so .slider .slick-slide > div:nth-child(5n+1) { … } will not work.