They key is here:
<li <?php post_class(); ?> id="post-<?php the_ID(); ?>">
You can add a parameter to the post_class
call, e.g.:
$counter = 0;
$custom_query = new WP_Query('cat=2687&posts_per_page=3'); //Top of the page - Top Photo Category
while($custom_query->have_posts()) : $custom_query->the_post();
$counter++;
$column = $counter %3; // 3 columns, use module to get the remainder
$class = "column-".$column;
?>
<ul>
<li <?php post_class($class); ?> id="post-<?php the_ID(); ?>">
Now the first post will have a ‘column-0’ class, the second ‘column-1’ and the third/last ‘column-2’. You can then apply your styles to these:
#top-content .column-2{
margin-left: 5px;
background-color: yellow;
border-style: 0px;
}
#top-content .column-2 a img{
margin-left:23px;
}
#top-content .column-2 h2{
margin-left:23px;
}
#top-content .column-2 p{
margin-left:23px;
}
Also remember to put an if($custom_query->have_posts())
around your loop, you never know what might happen, and define your query as an array not a string, e.g.:
$custom_query = new WP_Query(array(
'cat' => 2687,
'posts_per_page' => 3
));
It’s cleaner, easier to read, and you can do more advanced queries. It’s also a tiny bit faster and it’s good practice