One thing that’s been bothering me with Joomla! is that the main menu (and other menus, for that matter) doesn’t differentiate the first and last menu items’ mark-up in any way.  This can make it difficult to control their appearance via CSS.  You might want to do so, for example, in order to set the background image to a nice separator between the items that provides a three dimensional or gradient look that can’t be achieved with borders in CSS.  If you do that on all items, you’ll be left with an extra separator above the first item or below the last item, depending on how you implement it.

CSS2 addresses this via the pseudo-class “first-child”, but support among browsers, especially older ones like IE6, isn’t great.  CSS3 will have a “last-child” class, but its support among browsers is even worse, and nonexistent in IE.  That may be a solution in the future, but for now it’s not practical.

A common work-around is to simply add “first-child” and “last-child” classes to the first and last items in the mark-up.  However, Joomla!’s mark-up is dynamically generated by PHP code.  If you’re a PHP programmer and willing to slog through the documentation to figure out how to do it, you can.  Everyone else, however, is stuck.

I started poking around and ran into an August 2009 blog entry from Cecil Gupta that addresses the problem nicely.  It shows you how to modify the menu code in your template to add a class “first” and “last” to the first and last items, respectively.  You can then add styles to your CSS to make either or both of those items appear differently.