nth-child colors something wrong
css, css-selectors, html
Solution
You need to use `nth-child()` on the `li` tags, your `a` tags don't have any siblings. The purple color is your browsers default color for already visited links.
header ul li:nth-child(1) a {
color: #8cf;
}
header ul li:nth-child(2) a {
color: #f8c;
}
header ul li:nth-child(3) a {
color: #8fc;
}
header ul li:nth-child(4) a {
color: #b9b;
}
header ul li:nth-child(5) a {
color: #c8c;
}
<div id="main">
<header>
<nav>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="blog.html">Blog</a>
</li>
<li><a href="forums.html">Forums</a>
</li>
<li id="iamhere"><a href="instruction.html">Instruction</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
Problem
I am trying to make each li a different color using `nth-child();` This is my CSS: ``` header ul a:nth-child(1) { color: #8cf; } header ul a:nth-child(2) { color: #f8c; } header ul a:nth-child(3) { color: #8fc; } header ul a:nth-child(4) { color: #b9b; } header ul a:nth-child(5) { color: #c8c; } ``` This is my html: ``` <body> <div id="main"> <header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="forums.html">Forums</a></li> <li id="iamhere"><a href="instruction.html">Instruction</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> ``` Everything is purple even though I don't have any reference of purple anywhere.