How to change the color of each link for the nav bar?

user_14672235 0
Viewed 124

I am been search other forums but cant quite find the answer I'm looking for.

I want each link in my nav bar to be a different color. I have them right now as a shade of red but I want the other two to be a blue and a yellow.

My code:

nav li a {
    color: #F73139;
}
<nav>
    <ul>
        <li><a>home</a></li>
        <li><a>work</a></li>
        <li><a>contact</a></li>
    </ul>
</nav>

nav css html
2 Answers

You can use :nth-child to assign different colors to them:

nav li:nth-child(1) a {
    color: #F73139;
}

nav li:nth-child(2) a {
    color: blue;
}

nav li:nth-child(3) a {
    color: yellow;
}
<nav>
    <ul>
        <li><a>home</a></li>
        <li><a>work</a></li>
        <li><a>contact</a></li>
    </ul>
</nav>

user_102892650

You can also use CLASS attribute to name that specific list item

for eg:

li.one {color: red;}

li.two {color: blue;}

li.three {color: yellow;}
<nav>
  <ul>
    <li class="one"><a>home</a></li>
    <li class="two"><a>work</a></li>
    <li class="three"><a>contact</a></li>
  </ul>
</nav>

user_147394440
Related