How to style last-child: exerpt in wordpress loop? - wordpress

Question

I've seen this article but it's not exactly relevant to what I'm trying to do. I have a simple blog loop in which each blog has an <div class="exerpt">for the preview of the blog text. All of my posts have a border-bottom and I'm simply trying to get rid of the border-bottom, as well as make other adjustments for the last-child. However every element is being styled, not just the last one. Please note I'm using the mighty html5blank
index.php
<div class="page-section" style="padding-top:150px;">
<div class="wrapper">
<?php get_template_part('loop'); ?>
<?php get_template_part('pagination'); ?>
</div>
</div>
loop.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="journal-title">
<?php the_title(); ?>
</h2>
<span class="date"><?php the_time('F j, Y'); ?> </span>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<!-- /post title -->
<div class="exerpt">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
</article>
.exerpt {
margin-bottom:80px;
border-bottom:1px solid #999;
padding:40px 0px 80px 0px;
}
.exerpt:last-child {
border:none;
margin-bottom: 60px;
}
Thanks!

Answer 1

You can add a separate class for the last item in the loop by doing something like this:
First add this before the loop starts:
<?php $post_counter = 0; ?>
Add this within the loop:
<?php $post_counter++; ?>
Then modify your excerpt code:
<div class="exerpt <?php if( $post_counter == count( $posts ) ) echo 'last-post'?>">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
CSS:
.last-post {
border:none;
margin-bottom: 60px;
}