Separator after every div except the last
I have a horizontal separator between each article:
.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 can I remove using CSS the useless horizontal line after the last child #articles
? (useless because there is no next article, so no separation required)
source to share
Use a pseudo selector :last-child
:
.article:last-child { border-bottom: none; }
Basically, what this selector does is ask the question "Am I the last element of my parent's child?" And if so, applies the rules.
Note. :last-child
and is also :first-child
often misinterpreted by CSS novices. It doesn't mean "find my last child".
.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 here:
source to share
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 browser support for : first-child vs : last-child .
source to share
There are several other solutions to this problem worth mentioning.
: first-child
You can use in :first-child
conjunction with customizing your border at the top of the learning element - the first child then removes the border for the first element, and the visual output is the same.
Since it :first-child
's in the css2 spec, you can expect broader browser support than :last-child
. This is for the edge for sure, but it's possible it might get hit, especially considering the browsers in question are IE.
It is also easier to compute in the browser than the latter. The browser doesn't need to do anything to look at all the elements and work out the last one, it can just stop at the first match. It's worth considering if your front end is difficult.
Adjacent selector
Adjacent selection rules allow you to target an item only if it has another item of the specified type as a sibling. So:
p + p { border-top: 1px solid #888; }
will set an upper border on a tag p
only if it is preceded by a tag p
.
Again, this will cover browser browsers that: the last child may not be, although I think it is referred to as a performance issue, having somewhat similar issues to: last-child.
Class
You can also just use the class for the last element. While not necessarily visual for this problem, it's worth considering whether you want to do more complex things with the last element or if the containing HTML might change for some reason.
source to share
Something like that
.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>
source to share