How to Alternate the Color of List and Menu Items

Have you ever stumbled across a site where a list of links in a sidebar or a menu is multi-colored? You know, every other link is a different color? While you can easily change the color of links by adding a class to each link, what if you want to rearrange the order of the items? Well you’re going to have to update the classes as well in order to keep your pattern.

But what if I told you there’s a way to target the different links without having to adjust their classes. Imagine rearranging your menu and the colors update automatically! This can be done by targeting certain elements based on their position. Here’s how:

How to Alternate the Color of List Items

Let’s say you have a list of categories on your sidebar that looks like this:

To alternate the background color, we would add the following to our style.css file:

.widget ul > li:nth-child(2n+2) a {
     background-color: #96E8E5;
}

Which gives you this:

By adding :nth-child(2n+2), we’re targeting every 2nd list item, starting with the 2nd. If we wanted to target every 2nd list item, but starting with the 1st, you’d use :nth-child(2n+1) instead.

Sidenote: Keep in mind that you might have to change .widget in the above code, depending on how your theme is structured. You can find the correct element to target by using inspect element in your browser.

In the above example, I changed the background color, but you could change the text color, the font, or anything else you can think of.

How to Alternate the Color of Menu Items

Alternating the color of your WordPress menu items works similarly. Let’s say you have a basic menu that looks like this:

To alternate the colors of the menu items, use the following:

.genesis-nav-menu .menu-item:nth-child(2n+2) a {
     color: #96E8E5;
}

That’ll give you the same result as the list example above, like so:

Sidenote: The above code works for Genesis powered themes. Again, you’ll have to target different elements if you’re not using Genesis.

Alternating More Than Two Colors

In the examples above, I alternated 2 colors. But what if you wanted to have 3 colors alternating? The process would be the similar, but you’d have to target 2 different nth elements.

First, we’re going to target every 2nd link in the pattern, so link #2, link #5, link #8, etc):

.widget ul > li:nth-child(3n+2) a {
     background-color: #96E8E5;
}

You should get this:

Now we’ll want to target every 3rd link, i.e. link #3, link #6, link #9, etc.

.widget ul > li:nth-child(3n+3) a {
     background-color: #4E5D71;
}

That’ll give you this:

You can pretty much build any patterns you want, you just have to know which elements to target. Since math isn’t exactly my strong suit, I like to use this nifty :nth tester, which allows you to visually see what element is being targeted before you edit your code.