simple way of making selected navigation page link change colour? - html

Question

I know this is a silly question but for some reason I'm always having a problem with changing the background colour of a selected navigation item, I looked this up so many times and I tried doing the selected classes for a button but for some reason it doesn't work for me, can someone point out what am I doing wrong?
html:
<div id="nav">
<ul>
<li><a class="selected" href="?page=home">Home</a></li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
<li>Shop</li>
</ul>
</div>
css:
#nav {
list-style: none;
width: 100%;
text-align: center;
background-color: #000;
height:52px;
background-color: #000; opacity: 0.7; filter: alpha(opacity=50);
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 10px;
padding-left: 650px;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-family: 'Quicksand';
font-size: 25px;
color: #fff;
background-color: #000;
}
#nav li a:hover {
color: black;
background-color: #999;
background-color: #666;
color: white;
}
li.selected a { background-color: blue;
}

Answer 1

You've two issues here.
You are using li.selected a but you are assigning your class to a tag so the selector should be li a.selected
Specificity. You have #nav in all the selectors, since ID selectors are more specific, you need to add it to your .active selector as well. So it should be #nav li a.selected
Demo
Suggestion :
I would recommend you to use class instead of id. Keep ID's for JavaScript selectors, as it can access your DOM faster, but for CSS, stick to classes as much as you can, else you will end up with long specific selectors and even !important.
So you should have something like <div id="nav" class="nav"> and use .nav in CSS instead of #nav