Targeting a Certain Post in Loop (CSS)

Question

I am making a Top Photos section in a page. This section will have 3 last post (there are galleries in the posts), each with thumbnail, link and excerpt from the posts. The posts will be displayed in "box-style" and align horizontally. Container for these boxes is 1050px wide.

Here is my loop:

<div id="top-content">
<?php $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(); ?>
<ul>
    <li <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('top-photo-thumb'); ?><h2><?php the_title(); ?></h2></a>
        <p> <?php llc_excerpt('llc_excerptlength_long', 'llc_excerptmore') ?></p>
        <p class="view-more"><a href="<?php the_permalink(); ?>">View Gallery</a></p>
    </li>
</ul>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>

and here is my CSS file:

#top-content{
    margin-left: -10px;
}

#top-content ul{
    margin: 0 4px;
    float: left;
}

#top-content ul li{
    width: 320px;
    height: 100%;
    margin: 0 5px 0 5px;
    padding: 0 14px 0 0;
    /*display: block;*/
    border-right: 1px solid #D6D5D5;
}

#top-content h2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12pt;
    font-style: normal;
    line-height: 12pt;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    color: #4A65A8;
    padding: 0px;
    margin: 7px 0 0 0;
    text-align: left;
}

#top-content ul li p{
    width: 320px;
    margin: 5px 0 0 0;
    text-align: justify;
}

#top-content ul:last-child{
    margin-left: 5px;
    background-color: yellow;
    border-style: 0px;
}

#top-content ul:last-child a img{
    margin-left:23px;   
}

#top-content ul:last-child h2{
    margin-left:23px;   
}

#top-content ul:last-child p{
    margin-left:23px;   
}

(sorry about the messy code.. I've been experimenting :P)

I want to make a CSS division-line between these "boxes" (posts). The first and third (last) boxes should be placed right at the left and right edge of the container respectively without left and right border, so I think the way to achieve this is by targeting the second post and then add left and right border into it.

How do I achieve it or do you have other suggestion? (I think it is possible to add custom class at the loop). As you can see, I've been trying to use last-child (with nth and that "n" thingy) selector and still no luck.. I'm not really good at CSS (and PHP) TBH..

Thanks in advance!

Answer 1

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