A slider nested within a slider. How to make css not spread to nested?

Question

css

Good day Samurai! I use slick.js https://github.com/kenwheeler/slick One slider is nested inside another. The structure is like this:

<div class="SliderPanel">
   <div class="Slide">
         <div class="Onlink">
            <div class="Rand"></div>
            <div class="Rand"></div>
         </div>
   </div>
   <div class="Slide">
   </div>
   <div class="Slide">
   </div>
<div>

The following style has been applied to the outer slider:

.SliderPanel .slick-slide {
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}

.SliderPanel .slick-current {  
  display: block;
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

The problem is that when you swipe, the css action applies to the nested slider too. Please tell me how to fix?

Answer 1

This is how it should work

.SliderPanel > .slick-list >.slick-track > .slick-slide {
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}

.SliderPanel > .slick-list > .slick-track > .slick-current {  
  display: block;
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

Answer 2

use direct subordination

.SliderPanel > .slick-slide {
  display: block;
  opacity: .1;
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}

.SliderPanel > .slick-current {  
  display: block;
  opacity: 1;
  transition-delay: 0.3s;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

Answer 3

Created a sandbox https://jsfiddle.net/Snatch08/9aohe6fz/70/