Question

I have built a WP Loop that is limited to “2” articles that it loads. What I’d like to do is the second article in the loop or the bottom one, Not have a border-bottom on it.

How can I do this in the WP Loop?

My PHP Code is :

<div class="span content"> <!-- This is column 1 -->
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <p class=""<?php the_content(); ?>
   <?php endwhile; ?>
</div><!-- /.span8 .content -->

CSS for that is :

.article {
border-bottom: 1px dotted #000000;
width: 170px;
}

Thanks

Answer 1

Just do it with simple CSS. Should work down to IE7.

.article {
    width: 170px;
}

.article:first-child {
    border-bottom: 1px dotted #000000;
}

Note: The :first-child implemtation in IE7 is a bit buggy if your first-child is a text-node like a comment.

:first-child will match Item 1

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

:first-child does not match Item 1 because the comment.

<ul>
    <!-- Comment -->
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Workarround

<ul><!-- Comment --><li>Item 1</li>
    <li>Item 2</li>
</ul>

or just strip the comment.

You could also count your iteration in the while-loop. Thats not an elegant Method but should work for you…

<?php
    //Set Counter to 0
    $counter = 0;

    // Start Loop
    if ( have_posts() ) while ( have_posts() ) : the_post();

    // Increment Coounter
    $counter++;
?>
    <div class="span content item-<?php echo $counter; ?>">
        <h2><?php the_title(); ?></h2>
        <p><?php the_content(); ?></p>
    </div><!-- /.span8 .content -->
<?php endwhile; ?>

Each iteration of your WP-Loop will increment the $counter by 1.

First Iteration:

 <div class="span content item-1">

Second Iteration:

 <div class="span content item-2">

Third Iteration:

 <div class="span content item-3">

… and so on.