• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Make WP Simple

WordPress Tutorials

  • Blog
  • Getting Started
  • Tutorials

How to Alternate the Color of List and Menu Items

January 19, 2017 Tutorials 8 Comments

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.

Tweet17
Pin100
Share26
143 Shares

Reader Interactions

Comments

  1. Ashley LaMar says

    January 19, 2017 at 4:51 pm

    THIS. IS. FABULOUS. Thanks so much! I’m going to try this very soon.

    Reply
  2. Monica Galvan says

    January 19, 2017 at 9:48 pm

    I had no idea this was possible through code! Thanks for sharing 🙂

    Reply
  3. nancy says

    January 21, 2017 at 8:13 pm

    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!

    Reply
    • Allyssa Barnes says

      January 21, 2017 at 9:15 pm

      That makes me happy to hear! I really try to make things as simple as possible so any one can customize their site 🙂

      Reply
  4. vaartha says

    March 16, 2018 at 2:16 am

    Very Useful

    Reply
  5. Zeb Hansell says

    June 25, 2019 at 1:18 pm

    Very cool – this was exactly what I was looking for!

    Reply
  6. Darrell MacLennan says

    October 23, 2020 at 1:48 am

    Great tutorial, works perfectly – thanks for explaining it so nicely.

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

How to Alternate the Color of List and Menu Items

Looking for Something?

This site is powered by:

Footer

  • Getting Started
  • Tutorials
  • Tools & Resources
  • Website Strategy
  • All Tips & Tutorials
  • About
  • Subscribe
  • Get Help
  • Contact

© 2021 Italicized Creative LLC. Privacy Policy. Terms of Use.