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 bottom border to each article but not to the last one:

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

But with this I get a botton border on last article.

If I remove the UL then the last article does not get a border.

This is strange because I am only applying the style to article.

How can I solve this?

Thank You, Miguel

Answer 1

It should be last-of-type instead of last-child.

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

DEMO here.

Answer 2

:last-child matches any child, not just article elements. ul is the last child, so every article matches your selector. You want to use :last-of-type instead:

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