How to list menu-item- ids in order for wp_nav_menu

Question

I have a nav menu call:

'primary', 'container_class' => 'primary-menu' ) ); ?>

The output looks something like this:

<div class="primary-menu"><ul id="menu-other-links" class="menu">
<li id="menu-item-51" class="menu-item menu-item-type-custom"><a href="#">RSS</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-post_type"><a href="http://localhost:8888/graca/contacto/">Contacto</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-custom"><a href="#">Facebook</a></li>
<li id="menu-item-53" class="menu-item menu-item-type-custom"><a href="#">Twitter</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type"><a href="#">Site Info</a></li>
</ul></div>

I'm trying to apply a different background color to each menu item, so #1 would get one color, #2 a second color.

I would like the theme work for whatever menu items someone wants to set up- so it would be preferable it the #id on each li went in order.

Eg:

<ul>
<li id="item1">List item</li>
<li id="item2">List item</li>
<li id="item3">List item</li>
<li id="item4">List item</li>
</ul>

Any help would be appreciated.

Answer 1

If you can stand to not have it be backwards compatible, CSS3 introduced the nth-child selector, you could leverage that

Answer 2

check out http://codex.wordpress.org/Function_Reference/wp_nav_menu and look for the items_wrap part

Answer 3

Go to WP-admin -> Appearance -> Menus -> Screen options (top right) -> Check CSS Classes -> Open menu item and put your custom class you want and prepare style for it.

The best and easiest way to create custom CSS for each element in menu.