title: How to target all elements, except last one with css?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer a:not(:last-of-type) {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;a href="#"&gt;First&lt;/a&gt;
    &lt;a href="#"&gt;Second&lt;/a&gt;
    &lt;div&gt;
      &lt;a href="#"&gt;Third&lt;/a&gt;
    &lt;/div&gt;
    &lt;a href="#"&gt;Fourth&lt;/a&gt;
    &lt;a href="#"&gt;Fifth&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way, to target all <code>&lt;a&gt;</code>'s inside div.outer (I can't think of way to target the one inside ) container? The only workaround I can think of is css: <code>.outer a:not(.last)</code> and adding .last to last <code>&lt;a&gt;</code>. Any ideas? Background: The main idea why I'm doing this, is that I have elements, which line near edge of container, so each of them has to have margin of 10 from right, except last one. In this case, i don't have to type class margin-right-10 in each <code>&lt;a&gt;</code>, its just my own style I'm following.</p>