Page selection and identification

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"><a href="index.html"><img src="img/Dulwich Design Banner.png" width="434" height="200" alt=""></a></div>
	</div>
	<div id="banner2">
		<div id="link"><div id="selector"><a href="index.html">Home</a></div></div>
	<div id="link"><a href="about.html">About</a></div>
	<div id="link"><a href="blog.html">Blog</a></div>
	<div id="link">Contact</div><div id="link"> Projects</div>
	</div>
</div>

Run codeHide result

So, while the user is on a given page, I would like the link to be white, and the selector class should have a white background and gray text, in essence, so that the colors are reversed during the active page. Any help would be greatly appreciated.

Answer 1

The reason why it doesn't work is because your element uses idinstead classforselector

So from this:

<div id="link">
   <div id="selector">
      <a href="index.html">Home</a>
   </div>
</div>

Change it like this:

<div id="link">
 <div class="selector">
  <a href="index.html">Home</a>
 </div>
</div>

And your css, update yours .selectorand add .selector afor the text color:

.selector { 
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
    font-weight: bold;
}

.selector a {
  color: #4D4C4C;
}

Fiddle

, id , class. links id.