In Wordpress, I am searching for a way to include a "last" along with a "first" class to list out products inside Wordpress icons. The HTML could seem like this:

<div class="widget-area">
<ul >
    <li class="widget_recent_comments">
        <h3 class="widget-title">Recent comments</h3>
        <ul id="recentcomments">
            <li class="recentcomments">Comment 1</li>
            <li class="recentcomments">Comment 2</li>
            <li class="recentcomments">Comment 3</li>
            <li class="recentcomments">Comment 4</li>
    <li class="widget_my_links">
        <h3 class="widget-title">My links</h3>
        <ul id="my-links">
            <li class="item">Link 1</li>
            <li class="item">Link 2</li>
            <li class="item">Link 3</li>
            <li class="item">Link 4</li>
            <li class="item">Link 5</li>

Within this example above let me have first/last classes put into the li with "Comment 1", "Comment 4", "Link 1" and "Link 5".

Can there be a simple workaround with this? (I'd rather not do that with javascript)


I am speculating these lists are produced inside a loop. What exactly you could do this, is produce a variable prior to going in to the loop, and hang it's value to at least one ($i = 1). Than in the finish from the loop, add one up ($i++). Now, in which you want the very firstOrfinal class to look, that you can do

<?php if($i == 1):
  echo ' first';
elseif( $i == $number_of_items )
  echo 'last';

At $i == $number_of_products, you're evaluating the max using the current, which means you know you will find the last when the statement holds true.

Hope this solutions your question.

Well the very first-item is simple, only use

ul#my-list li:first-child {
    /* special styles */

It isn't adding a category, however, you can continue to style it. There's not really a similar css rule for :last-child regrettably