John,

I need to style the first and last menu items differently than the others. Can I do this? What's the best approach? (Hopefully with Tabs, but I'm willing to try a Template.)

Thanks.

I just found an easy to implement solution for this today using jQuery and the CSS nth Child selector.

I needed a bar to separate each menu item, but I did not want the first menu item to display it.

If you are using DNN 5 with jQuery, this goal is easily accomplished by adding this script to the top of your skin file:

jQuery(document).ready(function() { jQuery("#nav ul li:nth-child(1)").addClass("menu-first"); });

The nth-child selector finds the first menu item and adds a class to it. From there, I added my class declaration to the stylesheet and removed the background image.

I have tested this in IE6,7,8, Firefox, and Chrome. (Of course, in Firefox and Chrome, you could just target the first and last elements in you CSS, as they support the :nth-child selector.

You could also target the last element by using this selector: #nav ul li:last-child(1)