Apply not: last-child to article

Question

I have the following markup

<div>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
  <article>article 4</article>
  <ul class="pagination">
    <li>Page 1</li>
    <li>Page 2</li>
  </ul>
</div>

I tried to apply a lower bound to each article, but not to the last:

article:not(:last-child) {
  border-bottom: 8px solid #404040;
}

But with that, I get the botton border on the last article.

If I remove UL, then the last article will not get the border.

This is strange because I only apply style to the article.

How can i solve this?

Thanks Miguel

Answer 1

It should be last-of-typeinstead last-child.

article:not(:last-of-type) {
  border-bottom: 8px solid #404040;
}

DEMO is here.

Answer 2

:last-child , article. ul - , article . :last-of-type:

article:not(:last-of-type) {
    border-bottom: 8px solid #404040;
}

Answer 3

Use last-of-typeinsteadlast-child

article:not(:last-of-type) {
  border-bottom: 8px solid #404040;
}

Fiddle

Answer 4

At the first $(div)we choose ours div, .find('.article')we find all the articles inside div. Then with the help .last()we select the last article from the selected articles. And with .csswe add style to this article.

$('div').find('.article').last().css('border-bottom','none');