title: CSS Changing the color of a selected link using classes
body: <p>I have created a basic HTML menu in which use css. I used a class "nav" throughout the whole menu for simplicity. However because I used a class I am unsure of how to make the button for the active page in new color.</p>
  
  <p>Basically everything but the image should be a new color when the page is active (user on the page).</p>
  
  <p>this is my code:</p>
  
  <pre><code>    &lt;!--nav--&gt;
      &lt;ul class="nav"&gt;
      &lt;li class="nav"&gt;&lt;a href="index.html" target="_self"&gt;&lt;img class="nav" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="nav"&gt;&lt;a class="nav" href="index.html" target="_self"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="nav"&gt;&lt;a class="nav" href="Products.html" target="_self"&gt;Products&lt;/a&gt;        &lt;/li&gt;
      &lt;li class="nav"&gt;&lt;a class="nav" href="ShoppingCart.html" target="_self"&gt;Cart &lt;img class="cart_t" src="images/cart.png" alt="cart.jpg"  /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!--end nav--&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>/* nav */
  ul.nav
  {
      list-style:none;
      background-color:#999;
      border-top-right-radius:20px;
      border-top-left-radius:20px;
      width:1000px;
      height:70px;
      font-size:20px;
      margin:0px auto;
  }
  li.nav
  {
      display:inline;
      margin:0px;
  }
  a.nav
  {
      color:#000;
      background-color:#CCC;
      border-color:#999;
      border-style:outset;
      padding-left:45px;
      padding-right:45px;
      padding-top:10px;
      padding-bottom:10px;
      margin-left:10px;
      border-radius:15px;
      position:relative;
      bottom:20px;
      left:150px;
  }
  a.nav:hover
  {
      background-color:#666;
      border-style:inset;
      color:#333;
      box-shadow: 0px 0px 20px #FFF;
      text-shadow:none;
  }
  img.nav
  {
  
      border:none;
      margin-top:10px;
      position:relative;
      right:20px;
  }
  .cart_t
  {
      border:none;
      position:relative;
      top:10px;
      left:15px;
  }
  ul li a:active
  {
      background-color:#FF0000;
      font-size:33px;
  }
  
  /*end nav*/
  </code></pre>