title: Different style for last item of each list column
body: <p>I'm using CSS to divide a list in three different columns.
  Every item of the list has a bottom border. Now I want to hide the bottom border from every last item of the columns.</p>
  
  <p>I don't know how many items would be in the list, so it would not be possible to check for every second/thrid item with CSS.</p>
  
  <p>Is there any other way to adress the last item of a column?</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list-col-3 {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
  }
  .list-col {
      -moz-column-gap: 1.5rem;
      -webkit-column-gap: 1.5rem;
      column-gap: 1.5rem;
  }
  .list-col li {
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid;
  }
  .list-unstyled {
      padding-left: 0;
      list-style: none;
  }
  
  .card_post {
      margin-bottom: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid #b0afaf;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="list-unstyled list-col list-col-3"&gt;
   &lt;li class="card_post"&gt;
    &lt;h2 class="card-title"&gt;
     &lt;span&gt;Title&lt;/span&gt;
    &lt;/h2&gt;
    &lt;div class="card-text"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
    &lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="card_post"&gt;
    &lt;h2 class="card-title"&gt;
     &lt;span&gt;Title&lt;/span&gt;
    &lt;/h2&gt;
    &lt;div class="card-text"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
    &lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="card_post"&gt;
    &lt;h2 class="card-title"&gt;
     &lt;span&gt;Title&lt;/span&gt;
    &lt;/h2&gt;
    &lt;div class="card-text"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
    &lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="card_post"&gt;
    &lt;h2 class="card-title"&gt;
     &lt;span&gt;Title&lt;/span&gt;
    &lt;/h2&gt;
    &lt;div class="card-text"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
    &lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="card_post"&gt;
    &lt;h2 class="card-title"&gt;
     &lt;span&gt;Title&lt;/span&gt;
    &lt;/h2&gt;
    &lt;div class="card-text"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
    &lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="card_post"&gt;
    &lt;h2 class="card-title"&gt;
     &lt;span&gt;Title&lt;/span&gt;
    &lt;/h2&gt;
    &lt;div class="card-text"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
    &lt;/div&gt;
   &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>