Navbar with css with different background colours - html

Question

I have the following navbar :
nav ul {
display: block;
list-style-type: none;
height: 52px;
}
nav ul li {
display: inline-block;
width: 90px;
line-height: 52px;
text-align: center;
font-size: 15px;
}
nav ul li a {
display: block;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
transition: 0.4s ease;
background-color: pink;
}
<nav>
<ul>
<li>One
</li>
<li>
Two
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
Five
</li>
<li>
Six
</li>
<li>
Seven
</li>
</ul>
</nav>
I want the background color of rainbow. I mean tab 1 will have violet, tab 2 will have indigo... and so on. I do this by adding class to each li. I can also do this by adding id to each li. Isn't there a faster way? CSS only!

Answer 1

You can use nth-of-type() selector
nav ul {
display: block;
list-style-type: none;
height: 52px;
}
nav li {
display: inline-block;
width: 90px;
line-height: 52px;
text-align: center;
font-size: 15px;
}
nav a {
display: block;
text-decoration: none;
color: #000;
}
li:hover {
transition: 0.4s ease;
}
li:nth-of-type(1):hover {
background-color: violet;
}
li:nth-of-type(2):hover {
background-color: indigo;
}
li:nth-of-type(3):hover {
background-color: blue;
}
li:nth-of-type(4):hover {
background-color: green;
}
li:nth-of-type(5):hover {
background-color: yellow;
}
li:nth-of-type(6):hover {
background-color: orange;
}
li:nth-of-type(7):hover {
background-color: red;
}
<nav>
<ul>
<li>One
</li>
<li>
Two
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
Five
</li>
<li>
Six
</li>
<li>
Seven
</li>
</ul>
</nav>
BONUS
Just a suggestion, don't use long selectors like nav ul li a. You know that you have one navbar element, in that only one a tag. So just cut it short and use nav a and so forth ...

Answer 2

Yes you can use:
nav > ul > li:nth-child(1){
background: yellow;
}
nav > ul > li:nth-child(2){
background: red;
}
//etc...