Question

I’m creating a wordpress theme and I’m trying to create a navigation bar where each li has a different background color (eg red then green then blue). Then after the first three colors have been used it repeats them again.

so for example:

<div id="top-nav">
    <ul>
        <a href="#"><li>Hampstead</li></a> background red
        <a href="#"><li>Topsail Beach</li></a> background blue
        <a href="#"><li>North Topsail Beach</li></a> background green
        <a href="#"><li>Surf City</li></a> background red
        <a href="#"><li>Holly Ridge</li></a> background blue
        <a href="#"><li>Sneads Ferry</li></a> background green
    </ul>
</div>

I imagine javascript will be needed to recognize the li child number.

has anyone got any insight as to how I can do this?

Thank you for your time.

Answer 1

Using css nth-child selector, you can easily achieve this without Javascript.
Try something like

li:nth-child(3n)
{
  background:red;
}
li:nth-child(3n-1) 
{
  background:blue;
}
li:nth-child(3n-2) 
{
  background:green;
}

And if you rather do this with jQuery, it’s pretty much the same, as jQuery has an nth-child selector of it’s own.
Then it’ll be something like

$("li:nth-child(3n)").css('background-color', 'red');
$("li:nth-child(3n-1)").css('background-color', 'blue');
$("li:nth-child(3n-2)").css('background-color', 'green');