title: How do I nest a scss rule for one specific selector in a list using &
body: <p>I have a question that I could not find in the documentation or by searching stack overflow.</p>
  
  <p>This is not the best example but it will give you the gist of what I am trying to accomplish.</p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>  .btn-group { 
  
     .btn { 
      font-size: 1.2em;
      background: dodgerblue;
      color: white;
      padding: 10px 20px;
      border-radius: 6px;
  
      &amp;.btn-danger {
        background-color: red;
      }
      &amp;.btn-primary {
        background-color: blue; 
      }
  
      &amp;.btn-primary, &amp;.btn-danger {
        box-shadow: 1px solid black;
        &amp;[0] {
          border: 10px solid black;
        }
      }
  
      }
  
    }
  </code></pre>
  
  <p>Is there a way to select only one of the elements in a list? Maybe using array notation or something of that manner? </p>
  
  <p>This does not work, but you can see what I am trying to accomplish.</p>
  
  <p><strong>Demo</strong>: <a href="https://codepen.io/anon/pen/awjeON" rel="nofollow noreferrer">https://codepen.io/anon/pen/awjeON</a></p>
  
  <p><strong>The real world example</strong></p>
  
  <pre><code>  .bounce {
  
      .ng-leave {
        display: none; 
      }
  
      .ng-enter, .ng-leave {
        position: relative;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
      }
    } 
  </code></pre>