Basic CSS Syntax issue: How to make the navigation links a certain colour when on a particular page ?

Question

When I'm on a certain page, I want that link to be black.

I wrote this but it doesn't work. The hover function works though.

nav a:selected, nav a:hover{ color:#000; }

Answer 1 · 2015-02-03T19:01:55Z

February 3, 2015 7:01pm

Hi Tobi,

There is no :selected pseudo class unfortunately. And there isn't a pseudo class which will do what you are asking.

So I would suggest creating a class, such as .selected, and applying that to the relevant links on each page.

For example -

HTML

<nav>
   <a class="selected">Home</a>
   <a>Contact</a>
   <a>About</a>
</nav>

(This would be your home page)

CSS

nav a.selected {
   color: black;
}

Hope that helps,

Ede

Answer 2 · 2015-02-03T18:52:07Z

February 3, 2015 6:52pm

hello , you maybe should add class to your html tag

best regards

Answer 3 · 2015-02-03T19:01:16Z

February 3, 2015 7:01pm

for example in your html file :

  <a href="#home" class="home">click me</a>

then in your css file

.home{color:#000;} .home:hover{color:#C9C9C9;}

and in your html file where you want to change the color

add a script tag just before the body end tag:

<script>$(document).ready(function(){

$('.home').css('color','#FF0000;');

};  </script>

Happy Coding

Answer 4 · 2015-02-03T19:12:27Z

February 3, 2015 7:12pm

Thanks, that worked!!

Welcome to the Treehouse Community