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:
I have tried this and although it works fine with the :first-child selector it does not work at all with the :last-child.
Any thoughts?
Here is the live version of my site: <a href="http://dev.visualvisual.com/" rel="nofollow">http://dev.visualvisual.com/</a>
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>