title: Active Class of <a> unable to fetch inside repeated <li> element
body: <p>what is wrong with this code? I am unable to execute upon click of active tabs.</p>
  
  <pre><code>.sample-4.sample li:nth-child(1) a.nav-link.active ~ li:last-child:after{transform:translateX(-290%)}
   .sample-4.sample li:nth-child(2) a.nav-link.active ~ li:last-child:after{transform:translateX(-104%)}
   .sample-4.sample li:nth-child(3) a.nav-link.active ~ li:last-child:after{transform:translateX(-90%)}
   .sample-4.sample li:nth-child(4) a.nav-link.active ~ li:last-child:after{transform:translateX(0%)}
  
  .sample .nav.nav-tabs li:last- 
   child:after {
     content:'';width:100%;height:3px;background- 
     color:green;display:block;
     bottom:-4px;
     transform:translateX(0);
     transition:all .5s linear
   }
  </code></pre>
  
  <p>If I am using like below Code is working fine.</p>
  
  <pre><code> .sample-4.sample li:nth-child(1) ~ li:last-child:after{transform:translateX(-290%)}
   .sample-4.sample li:nth-child(2) ~ li:last-child:after{transform:translateX(-104%)}
   .sample-4.sample li:nth-child(3) ~ li:last-child:after{transform:translateX(-90%)}
   .sample-4.sample li:nth-child(4) ~ li:last-child:after{transform:translateX(0%)}
  </code></pre>