Hover each item in a ul different colour

Question

I need to have each li in a ul change to a different colour when hovered. I know that you can use :first-child and :last-child, but can you select 1st, 2nd, 3rd etc? I am changing each item in a Wordpress navigation menu.

There are five items at the minute, if you could tell me a way to use CSS/jQuery to set each to a different colour (preferably CSS) then that would be great.

It would be even better if it could be set up so if more items are added later then they can randomly select one of five colours.

Answer 1

Use the :nth-child() or :nth-of-type CSS selectors:

p:nth-child(2) {
    background: #ff0000;
}

OR

p:nth-of-type(2) {
    background: #ff0000;
}

DEMO: https://jsfiddle.net/lmgonzalves/bv9h7ue3/1/