title: Target Active Element in Slick Carousel
body: <p>Hey guys I cant seem to find a solution on targeting the active element in a slick carousel. All I'm wanting to do is add a style to the active element clicked.  </p>
  
  <p>I've tried </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slick-active { background: lightgray;}
  .slick-active + .slick-active { background: white; }
  
  .slick-active:nthchild(1){}
  .slick-active:nth-type-of(1){}
  .slick-active:first-type-of{}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first option worked if the slide contained a few elements but I don't want to have to hard code that for every element added.</p>
  
  <p>If I use <code>.slick-active{}</code> it will target all elements showing. </p>
  
  <p>Any ideas? I am using <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick</a> carousel.</p>