単純な CSS でそれを行うだけです。IE7まで動作するはずです。
.article {
width: 170px;
}
.article:first-child {
border-bottom: 1px dotted #000000;
}
注: IE7 の :first-child 実装は、first-child がコメントのようなテキスト ノードである場合、少しバグがあります。
:first-child はアイテム 1 に一致します
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
:first-child は、コメントのためアイテム 1 と一致しません。
<ul>
<!-- Comment -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
回避策
<ul><!-- Comment --><li>Item 1</li>
<li>Item 2</li>
</ul>
または単にコメントを削除します。
while ループで反復をカウントすることもできます。それはエレガントな方法ではありませんが、あなたのために働くはずです...
<?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; ?>
WP-Loop の反復ごとに、$counter が 1 ずつインクリメントされます。
最初の反復:
<div class="span content item-1">
2 回目の反復:
<div class="span content item-2">
3 回目の反復:
<div class="span content item-3">
... 等々。