title: How to use the :last-child selector?
body: <p>I want to simply add a <code>border-bottom</code> to the last <code>.slab</code></p>
  
  <p>I tried a few things and I am unable to understand what is going on.</p>
  
  <p><strong>Case 1 - use <code>.wrapper:last-child</code></strong></p>
  
  <p>If I try this on <a href="http://codepen.io/anon/pen/WrGZEW" rel="nofollow">codepen.io</a> or on Stackoverflow snippets, I don't get a <code>border-bottom</code> on last <code>.slab</code></p>
  
  <p>If I try this on <a href="https://jsfiddle.net/kccqo7po/" rel="nofollow">JSFiddle</a> or run the code separately in Chrome, I get a <code>border-bottom</code> on last <code>.slab</code>. However, if I uncomment <code>&lt;div class="something"&gt;New&lt;/div&gt;</code>, then the <code>border-bottom</code> on last <code>.slab</code> vanishes in both JSFiddle and on Chrome.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
      width: 10em;
      margin: 1em;
  }
  .wrapper:last-child {
      border-bottom: 1px solid #999;
  }
  .slab {
      background-color: #eee;
      border-top: 1px solid #999;
      padding: 1em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="slab"&gt;Hello&lt;/div&gt;
      &lt;div class="slab"&gt;Hello&lt;/div&gt;
      &lt;div class="slab"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;!--&lt;div class="something"&gt;New&lt;/div&gt;--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Case 2 - use <code>.slab:last-child</code></strong></p>
  
  <p>Turns out this works everywhere - JSFiddle, Chrome, codepen.io and on Stackoverflow. But I thought the selection was really for the last-child <strong><em>of</em></strong> <code>.slab</code> and not the last <code>.slab</code> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
      width: 10em;
      margin: 1em;
  }
  .slab {
      background-color: #eee;
      border-top: 1px solid #999;
      padding: 1em;
  }
  .slab:last-child {
      border-bottom: 1px solid #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="slab"&gt;Hello&lt;/div&gt;
      &lt;div class="slab"&gt;Hello&lt;/div&gt;
      &lt;div class="slab"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Questions:</p>
  
  <ol>
  <li>Does <code>.slab:last-child</code> mean the last child of <code>.slab</code> or the last occurrence of <code>.slab</code> ?</li>
  <li>In <strong>case 1</strong>, why is the <code>border-bottom</code> vanishing after the introduction of an unrelated element <code>.something</code> ?</li>
  <li>What is the best way to apply <code>border-bottom</code> to the last <code>.slab</code> ?</li>
  </ol>