Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply not:last-child to article

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

like image 593
Miguel Moura Avatar asked Mar 21 '23 02:03

Miguel Moura


2 Answers

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

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

DEMO here.

like image 128
codingrose Avatar answered Apr 01 '23 01:04

codingrose


: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;
}
like image 31
Blender Avatar answered Apr 01 '23 03:04

Blender