Last-child not working with classes. Last-of-type also not working

admin

Administrator
Staff member
I am trying to select the :last-child of a series of wordpress posts (with the same class) in my style.css file.
Here is a simplified version of my document structure:

Code:
<div id="container">
    <div id="content">
  <!--start .post-->
  <div id="post-33" class="hentry p1 post">
            <h2 class="entry-title"><a href="url">Post 1</a></h2>
            <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
        </div>
  <!--end  .post -->
  <!--start .post-->
  <div id="post-24" class="hentry p1 post">
    <h2 class="entry-title"><a href="url">Post 2</a></h2>
    <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <!--end  .post -->
  <!--start .post-->
  <div id="post-24" class="hentry p1 post">
    <h2 class="entry-title"><a href="url">Post 3</a></h2>
    <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <!--end  .post -->

        <div id="nav-below" class="navigation">
            <div class="nav-previous"></div>
            <div class="nav-next"></div>
        </div>
    </div><!-- #content -->
</div><!-- #container -->

I have tried this and although it works fine with the :first-child selector it does not work at all with the :last-child.

Code:
.post .entry-content { 
    background-color: pink; 
    border-bottom: 2px solid;
}

.post:first-child .entry-content { 
    background-color: red; 
    border-bottom: 0px solid;
}

.post:last-child .entry-content { 
    background-color: yellow; 
    border-bottom: 0px solid;
}

Any thoughts?
Here is the live version of my site: <a href="http://dev.visualvisual.com/" rel="nofollow">http://dev.visualvisual.com/</a>