How to Alternate the Color of List and Menu Items

January 19, 2017

This post may contain affiliate links, which means I will receive compensation if you click through and make a purchase.

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:

How to Alternate the Color of List and Menu Items

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:

How to Alternate the Color of List and Menu Items

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:

How to Alternate the Color of List and Menu Items

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:

How to Alternate the Color of List and Menu Items

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:

How to Alternate the Color of List and Menu Items

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:

How to Alternate the Color of List and Menu Items

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.

Need some development help?

8 thoughts on “How to Alternate the Color of List and Menu Items”

  1. You have made it look so simple and which such great visuals and with explanations that make me feel like I can do this and the way I want to – since you offered alternative examples with the documentation on how to use other patterns of alternating colors. Thanks!

  2. Pingback: Things I Loved Last Week Vol. 2 | Far Beyond Love

Leave a Comment

Your email address will not be published. Required fields are marked *