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.