Wordpress Query - The Loop changing CSS for a div - wordpress

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.