Page selection and identification - html

Question

#bannercontainer{
height: 200;
width: 960;
}
#banner1{
height: 100px;
width: 960px;
background-color: white;
}
#banner2 {background-color: #4D4C4C;
color: white;
height: 100px;
width: 960px;
position: static;
}
.logo {
width: 433px;
height: 199px;
float: left;
}
.linkcontainer{
height: auto;
width: auto;
vertical-align: bottom;
position: absolute;
bottom: 0px;
}
a:active{ color: grey;
font-weight: bold;
background-color: white;
}
a, a:visited { color: white;
text-decoration: none;
}
#link {
padding-top: 10px;
margin-right: 30px;
margin-bottom:20px;
font-size:15pt;
font-weight: bold;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
display:inline-block;
position:relative;
float:right;
}
.selector {
background-color: white;
color: #4D4C4C;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
<div id="bannercontainer">
<div id="banner1">
<div id="logo"><img src="img/Dulwich Design Banner.png" width="434" height="200" alt=""></div>
</div>
<div id="banner2">
<div id="link"><div id="selector">Home</div></div>
<div id="link">About</div>
<div id="link">Blog</div>
<div id="link">Contact</div><div id="link"> Projects</div>
</div>
</div>
So, while a user is on a given page, I would like the link to be white and the "selector" class to have a white background and grey text, essentially for the colours to be reversed while the page is active. Any help would be greatly appreciated.

Answer 1

Reason why it's not working it's because your element is using id instead of class for selector
So from this:
<div id="link">
<div id="selector">
Home
</div>
</div>
Change it to this:
<div id="link">
<div class="selector">
Home
</div>
</div>
And your css, update your .selector and add .selector a for the text color:
.selector {
background-color: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
.selector a {
color: #4D4C4C;
}
Fiddle
Also note that it's not good to have the same id on multiple elements, you should use class instead. I'm referring to multiple elements with links id.