Reputation: 438
I'm trying to change the color only the third one but for some reason css nth-of-type doesn't work...
ul li a:nth-of-type(3){
color: #111111;
}
<ul>
<li class="nav_menu"><a id="currentlink" href="#">HOME PAGE</a></li>
<li class="nav_menu"><a href="homework/homework2/index.html">II</a></li>
<li class="nav_menu"><a href="#">III</a></li>
<li class="nav_menu"><a href="#">IV</a></li>
<li class="nav_menu"><a href="#">V</a></li>
<li class="nav_menu"><a href="#">VI</a></li>
<li class="nav_menu"><a href="#">VII</a></li>
<li class="nav_menu"><a href="#">VIII</a></li>
<li class="nav_menu"><a href="#">IX</a></li>
<li class="nav_menu"><a href="#">X</a></li>
</ul>
How do I fix this? Thank you for your help.
Upvotes: 2
Views: 794
Reputation: 1102
It should be:
ul li:nth-of-type(3) a {
color: #111111;
}
You want the a
tag inside the third li
.
Upvotes: 8
Reputation: 26
Add below code,
<ul>
<li class="nav_menu"><a id="currentlink" href="#">HOME PAGE</a></li>
<li class="nav_menu"><a href="homework/homework2/index.html">II</a></li>
<li class="nav_menu"><a href="#">III</a></li>
<li class="nav_menu"><a href="#">IV</a></li>
<li class="nav_menu"><a href="#">V</a></li>
<li class="nav_menu"><a href="#">VI</a></li>
<li class="nav_menu"><a href="#">VII</a></li>
<li class="nav_menu"><a href="#">VIII</a></li>
<li class="nav_menu"><a href="#">IX</a></li>
<li class="nav_menu"><a href="#">X</a></li>
</ul>
<style>
ul li:nth-child(3) a{
color: #111111;
}
</style>
Upvotes: 0
Reputation: 1774
nth-of-type targets the nth child of the specified elements parent (of the same type).
So your css:
ul li a:nth-of-type(3){
color: #111111;
}
was targeting the third child of your li
which doesn't exist as your li
has a single child a
what you want is:
ul li:nth-of-type(3) a{
color: #111111;
}
which targets the 3rd child of ul
which is a li
, then change the color of any a
tags that follow.
Snippet:
ul li:nth-of-type(3) a{
color: #111111;
}
<ul>
<li class="nav_menu"><a id="currentlink" href="#">HOME PAGE</a></li>
<li class="nav_menu"><a href="homework/homework2/index.html">II</a></li>
<li class="nav_menu"><a href="#">III</a></li>
<li class="nav_menu"><a href="#">IV</a></li>
<li class="nav_menu"><a href="#">V</a></li>
<li class="nav_menu"><a href="#">VI</a></li>
<li class="nav_menu"><a href="#">VII</a></li>
<li class="nav_menu"><a href="#">VIII</a></li>
<li class="nav_menu"><a href="#">IX</a></li>
<li class="nav_menu"><a href="#">X</a></li>
</ul>
Upvotes: 1
Reputation: 627
list of <li>
and than a
ul li:nth-of-type(3) a{
color: #111111;
}
https://jsfiddle.net/d8oz6qbu/
Upvotes: 2
Reputation: 521
You are selecting the a tag in your css, while you need to select the third list item. not the third a tag
try
ul li:nth-child(3) {
color: #111111;
}
or
ul li:nth-child(3) a {
color: #111111;
}
Upvotes: 1