CODEWITHSUNDEEP
htmlcsscss-selectors
kayak
kayak

Reputation: 438

CSS nth-child doesn't work

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

Answers (5)

Mg Thar
Mg Thar

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

suman chauhan
suman chauhan

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

Ayo K
Ayo K

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

lalit bhakuni
lalit bhakuni

Reputation: 627

list of <li> and than a 

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

https://jsfiddle.net/d8oz6qbu/

Upvotes: 2

Napinator
Napinator

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

Related Questions