CSS nth-child doesn't work

Question

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.

Answer 1

It should be:

ul li:nth-of-type(3) a {
    color: #111111;
}

You want the a tag inside the third li .

Answer 2

list of <li> and than a

ul li:nth-of-type(3) a{
    color: #111111;
}

https://jsfiddle.net/d8oz6qbu/

Answer 3

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;
}

Answer 4

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> 

Answer 5

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>