Style last post in loop differently?

  • I came across this post that I think answers my question but I’m not sure how to implement it into my code. Basically, I have a features box set up on the main page with 4 posts and I want to separate each one with a border-right. However, the last post in the list shouldn’t have a border at all. If you’re confused as to what I mean, you can check out https://www.gawker.com. The list of posts on top are separated by a border but the last post in that list doesn’t have one. How can I achieve the same effect?

    Here is my current code which is set up in a separate loop.

    <div id="carousel" style="border: 2px solid rgb(241, 241, 241); height: 184px; margin-bottom: 20px; overflow:hidden; padding:10px;">
		<ul style="margin: 0pt; padding: 0pt; height:100%;">
		<?php
		$carousel = new WP_Query();
		$carousel->query('cat=3,4&showposts=4');
		?>

		<?php while ($carousel->have_posts()) : $carousel->the_post(); ?>
			<li id="carousel-post" style="border: 2px solid #f1f1f1; display:inline; float:left; height:170px; margin:0 9px; padding:5px; width:120px;">
			<center><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img class="blog-avatar" width="100" height="100" src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" /></a></center>
			<h2 style="font-size:1.3em; margin:5px 0 0 0"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php if (strlen($post->post_title) > 60) {
			echo substr(the_title($before = '', $after = '', FALSE), 0, 60) . '...'; } else {
			the_title();
			} ?></a></h2>
			</li>
		<?php endwhile; ?>
		</ul>
	</div>
Viewing 2 replies - 1 through 2 (of 2 total)

  • — better late than never —

    Hi, I had a look at the other post you’d linked to and I can see why you couldn’t exactly follow it, I think they were making it more complicated than it needs to be.

    Here’s the code I’ve just written to do the same job:

    <?php /* The Loop */ ?>
<?php $post_counter = 0;
while ( have_posts() ) : the_post() ?>
	<?php $post_counter++; ?>
	<div id="post-<?php the_ID(); ?>" <?php if( $post_counter == count( $posts ) ) post_class('last-post'); else post_class(); ?>>

    The conditional statement simply test IF the $post_counter has reached the same number as the total counted posts, you can then call the post_class() function with or without any additional class as needed. You can add as many classes as you like this way, just comment them and comma separate!

    hth

    If you don’t mind excluding support for the older browsers you can target the last child element (any kind of child element) with specific CSS..

    #carousel ul li:last-child {
   /* Styling that applies to the last child */
}

    This can be applied to other types of elements to, example..

    #someid div.withsomeclass:last-child { }

    NOTE: You’re introducing invalid code with your current loop, here.

    <li id="carousel-post" style

    IDs must be unique for any given page, if that ID is applied to each list item, then of course they won’t be unique. You might of been aware of the error, but figured i’d point it out just incase… ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Style last post in loop differently?’ is closed to new replies.