Add color to selected <li> item / override <ul> style

I have navigation for which I need to set a color for the selected item. It's flat HTML and CSS.

Here's the menu code:

 <ul id="top_navigation">
     <li class="border_red"><a href="index.html">Home</a></li>
     <li class="border_red"><a href="about.html">About</a></li>
     <li class="border_red"><a href="services.html"><font color="#cf3533">Services</font></a></li>
     <li class="border_red"><a href="careers.html">Careers</a></li>
     <li class="border_red"><a href="news.html">News</a></li>
     <li class="border_red"><a href="sitemap.html">Sitemap</a></li>
     <li><a href="contact.html">Contact</a></li>
 </ul>

And here's the CSS - there's the basic set up and then a class to put the pipe between the items:

#top_navigation {
   width: 696px;
   margin: 0px;
   padding: 0 0 0 4px;
   list-style-type: none;
   overflow: hidden;
}

#top_navigation li {
   width: auto;
   height: 17px;
   margin: 0px;
   padding: 1px 10px 0 10px;
   float: left;
}

#top_navigation li a {
   margin: 0px;
   padding: 0px;
   display: block;
   font-size: 12px;
   text-align: center;
   text-decoration: none;
}

#top_navigation li a:hover {
   color: #cf3533;
}

This sets the pipe on the right.

.border_red {
   border-right: 1px solid #d7d7d7;
}

I tried combining the two and creating a _selected style, and the pipe shows up, but I can't get the color to change for the selected.

I have to be WCAG Priorities 1,2,3-compliant, so I can't just set 开发者_C百科it manually with <font>.

With "flat" HTML and CSS only, this can't be done. You can do this by inserting some server-side code to add a "current" class to the current navigation item, or you can do it with JavaScript by comparing the window.location to the href of the links.

To find out where particular element inherits its style from, open Firebug (Firefox) or Web Inspector (Safari), select the element, and you will see list of its styles and their origins. Overwritten styles are marked with strike-through text.

A site note: CSS class name should tell what the element is, not how it looks. Instead of repeating border_red class, consider the following markup:

<ul>
    <li class="first">...</li>
    <li>...</li>
    <li>...</li>
</ul>

With CSS:

ul li {
    border-left: .1em solid red;
}

ul li.first {
    border-left: 0;
}

ul li:first-child {
    border-left: 0;  /* If support for ancient browsers is not needed */
}