:last-child selector working on some pages but not others

Issue

I want all but the last of a series of posts on a Wordpress page to have simple dividers between them, which I've implemented using a bottom border.

I've used last-child to remove the border on the last post of each page, and it works on some posts but not others.

The last post on the homepage has no bottom border as intended, but on the tag pages the last post seems to totally ignore the :last-child selector. It also doesn't work in this JSFiddle.

Markup is basically this:

<div id="full-width">
 <article id="post-250" class="post">
   Post here
 </article>
 <article id="post-245" class="post">
   Post here
 </article>
 <div class="pagination clearfix">
 </div>
</div>

With this CSS:

article.post {
   padding-bottom: 60px;
   border-bottom: 1px solid #dddddd;
}

article.post:last-child {
   padding-bottom: 0px;
   border-bottom: 0 none; 
}

I'm not sure if it has something to do with the pagination div below the articles (which will start to serve a purpose when there's more content), but that's a div and not an article so shouldn't be affected by my article.post:last-child selector.

Even stranger - the first article on each tag page responds to being targeted with a :first-child selector, but the last article doesn't respond to :last-child.

I can't figure out why what looks like a very similar generated markup between the homepage and the tag page works in one case and doesn't in the other.

My CSS validates fully.

Can anyone suggest anything?

Solution

:last-child means litteraly the last child, the last child element of its container. On the page where you said :last-child doesn't work you have another div as last child (more speicically <div class="pagination clearfix">).

There are two solutions, as I see it:

1. If you don't want to change your markup, you could just use article:last-of-type instead of article.post:last-child.

2. Move <div class="pagination clearfix"> out of that container.

Answered By - display-name-is-missing