title: last-child and last-of-type not working in SASS
body: <p><strong>How would you write this to be SASS compliant?</strong></p>
  
  <pre><code>.fader { display: inline-block; }
  .fader img:last-child {
      position: absolute;
      top: 0; 
      left: 0;
      display: none;
  }​
  </code></pre>
  
  <p>Basically I'm just replicating this example of fading in one image over another <a href="https://stackoverflow.com/questions/10039174/jquery-hover-image-change-animation"><strong>(found here.)</strong></a></p>
  
  <p>His JFiddle example: <a href="http://jsfiddle.net/Xm2Be/3/" rel="noreferrer">http://jsfiddle.net/Xm2Be/3/</a></p>
  
  <p>However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.</p>
  
  <h2>My Code</h2>
  
  <p>Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)</p>
  
  <p><strong>My CodePen:</strong>
  <a href="http://codepen.io/leongaban/pen/xnjso" rel="noreferrer">http://codepen.io/leongaban/pen/xnjso</a></p>
  
  <p>I tried</p>
  
  <pre><code>.try-me img:last-child &amp; .tryme img:last-of-type
  </code></pre>
  
  <p>But the : throws SASS compile errors, the code below works</p>
  
  <pre><code>.try-me img last-of-type {
      position: absolute;
      top: 0; 
      left: 0;
      display: none;
  }
  </code></pre>
  
  <p>However it spits out CSS which doesn't help me:</p>
  
  <pre><code>.container .home-content .try-me img last-of-type {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
  }
  </code></pre>
  
  <hr>
  
  <h2>UPDATE: Working Codepen:</h2>
  
  <p><a href="http://codepen.io/leongaban/pen/xnjso" rel="noreferrer">http://codepen.io/leongaban/pen/xnjso</a></p>