Targeting a Certain Post in Loop (CSS)

Question

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