Necesito aplicar un color de borde diferente para cada elemento deslizante deslizante con 5 colores que miran con rojo, probé el código a continuación, no funciona, aplica solo el primer color a todos los elementos cuando aplico el control deslizante deslizante.
<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; }Usar variables css
<div class="slider"> <div style='--clr:#000'></div> <div style='--clr:#fff'></div> ------ </div> .slick-item{ border:5px solid var(--clr); }Solo necesita modificar la configuración del nth-child:
.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; } <div class="slider"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>