Search code examples
htmlcsstumblrcss-selectors

Can't get the ":last-child" selector to work on my layout. What am I missing?

So I'm working on a tumblr theme design and each post should has a wrapping container (.posts-wrapper) that has 66px of bottom-padding, 1px bottom border, and 84px of bottom-margin, then some page navigation at the bottom. I wanted to remove the margin and divder on the final post of the page so there's nothing between the navigation and the last post, but for some reason my css is not applying.

    .index-wrapper {
    background-color: #ffffff;
    min-height: 600px;
}


.posts-wrapper {
    margin: 0 auto;
    margin-bottom: 84px;
    padding-bottom: 66px;
    border-bottom: 1px solid;
}

.posts-wrapper:last-child {
    margin-bottom: 0px !important;
    padding-bottom: 66px  !important;
    border-bottom: 0px solid  !important;
}

.index-post {
    max-width: 960px;
    margin: 0 auto;
    padding:0 50px;
    position:relative;
}

Here is a reference link to my work in progress on dropbox: http://dl.dropboxusercontent.com/u/35202847/writersblock_theme/index.html

Maybe I'm being silly and forgot something simple to do. Any insight would be greatly appreciated

Solution

  • Your problem is that the last .posts-wrapper div you have is NOT the last child of its parent. You have the <nav> element as a sibling after it.

    As you're already using CSS3 selectors, you can try the :last-of-type pseudo-selector to get the last .posts-wrapper element.

    .posts-wrapper:last-of-type {
  margin-bottom:0;
  padding-bottom:66px;
  border-bottom:0;
}