Styling first and last list items (and Wordpress)

Sometimes a design calls for the first and last items in a list to be styled differently for the others, for example a line or column of overlapping tabs.

For most modern browsers this is trivial and can be done using the list-class:first-child and list-class:last-child psuedoclasses. It's just that Internet Explorer doesn't support these very well.

If you are hardcoding the list or writing the generation routine it is also simple to generate 'first-item' and 'last-item' classes in the appropriate place.

<ul id="list-id">
<li class="ie-list-first list-type-item">Stuff</li>
<li class="list-type-item">Stuff</li>

<li class="list-type-item">Stuff</li>
<li class="ie-list-last-last list-type-item">Stuff</li>
</ul>

When templating for an existing CMS it may not be desirable to dig deeply enough to customise the code. For example WordPress's wp_list_pages() function (with appropriate parameters) returns something like this:

<li class="page_item page-item-4 current_page_item">Page link</li>
<li class="page_item page-item-9">Page link</li>

<li class="page_item page-item-13">Page link</li>
<li class="page_item page-item-15">Page link</li>
<li class="page_item page-item-34">Page link></li>
<li class="page_item page-item-25">Page link</li>

I spent some time following the function trail before deciding it was better to add the classes after the string was generated. Fortunately if you set 'echo=0' wp_list_pages() will return the string to a variable. After that it's just a matter of string substitution - first and last incidence of class=" . (This might get a bit trickier if you're using nested lists, but I try and keep depth=1 if possible).

It turned out the easiest way to do this was with a preg_replace - but it still requires a little trickery because you can't tell preg_replace to start from the end of a string. Instead you have to reverse everything, do the replacement, and then reverse everything again.

//get li string
$pages = wp_list_pages('title_li=&depth=1&echo=0' );

//add styling identifiers for first item
$pages = preg_replace('/class="/','class="ie-list-first ', $pages, 1); //note space on end of replacement string

//add styling identifiers for last item
$reversedString = strrev($pages);
$reversedSearch = '/'.strrev('class="').'/';
$endClass = strrev('class="ie-list-last '); //note space on end

$pages = strrev(preg_replace($reversedSearch,$endClass, $reversedString, 1));

//output
echo $pages;

I make sure the ie-list class is first because it makes it easier to call in your IE-specific stylesheet without worrying that another CMS generated class will get precedence.