Separator after each div, except the last - html

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/

Answer 3

Something like this
.article:not(:last-child) {
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>
OR
.article {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #EEE;
}
.article:last-child {
border-bottom:0;
}
<div id="articles">
<div class="article">Hello1</div>
<div class="article">Hello2</div>
<div class="article">Hello3</div>
<div class="article">Hello4</div>
</div>

Answer 4

There are a few of other solutions to this problem that are worth a mention.
:first-child
You can use :first-child along with setting your border on the top of teach element - first child then removes the border on the first element and the visual output is the same.
As :first-child is in the css2 spec you can count on wider browser support than :last-child. This is an edge case for sure, but one that could conceivably be hit, especially considering the browsers in question are IEs.
It's also easier to compute in the browser than last child. The browser doesn't have to do anything to look at all the elements and work out the last, it can just stop at the first that matches. Worth considering if your front end is complex.
Adjacent selectors
Adjacent selector rules allow you to target an element only if it has another element of the specified type as a sibling. So:
p + p { border-top: 1px solid #888; }
will set a border top on a p tag only if it's preceded by a p tag.
Again this will cover edge case browsers that :last-child might not though I think it's cited as a performance concern, suffering somewhat similar issues to :last-child.
More info
A class
You can also just use a class on the last element. While this isn't necessary visually for this problem it's worth considering if you want to do more complex things with the last element, or if the containing HTML may change for some reason.

Answer 5

I prefer to use :first-child instead :last-child because IE7+ supports it (JSFiddle):
.article {
padding: 20px 0;
border-top: 1px solid #eee;
}
.article:first-child {
padding-top: 0;
border-top: 0;
}
<div id="articles">
<div class="article">Hello1</div>
<div class="article">Hello2</div>
<div class="article">Hello3</div>
<div class="article">Hello4</div>
</div>
See browsers support of :first-child vs :last-child.

Answer 6

.article:not(:last-child) {
border-bottom: 1px solid #eee;
}

Answer 7

Use .article:last-child { border-bottom: none; }
Each other .article element will have the defined style(/the border)!