Separator after each div, except the last

Question

Between each article, I have a horizontal separator:

.article {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

<div id="articles">
    <div class="article">Hello1</div>
    <div class="article">Hello2</div>
    <div class="article">Hello3</div>
    <div class="article">Hello4</div>
</div>

How to remove, with CSS, the useless horizontal line after the last child of #articles? (useless because there is no next article, so no separation needed)

Answer 1

With this CSS:

.article:last-child { border-bottom: none; }

DEMO: https://jsfiddle.net/lmgonzalves/r8pbLaas/

Answer 2

Use :last-child pseudo selector:

.article:last-child { border-bottom: none; }

Basically, what this selector does is ask the question "Am I the last direct child element of my parent?", and if so, applies the rules.

Note: :last-child, as well as :first-child, are often misinterpreted by CSS beginners. It does not mean "find my last child element".

.article { margin-bottom: 20px; padding-bottom:20px; border-bottom: 1px solid #EEE; }
.article:last-child {
   border-bottom: 0 none;
}

<div id="articles">
  <div class="article">Hello1</div>
  <div class="article">Hello2</div>
  <div class="article">Hello3</div>
  <div class="article">Hello4</div>
</div>

Find more information on it here:

https://css-tricks.com/almanac/selectors/l/last-child/