title: Add color to selected <li> item / override <ul> style
body: <p>I have navigation for which I need to set a color for the selected item.  It's flat HTML and CSS.</p>
  
  <p>Here's the menu code:</p>
  
  <pre><code> &lt;ul id="top_navigation"&gt;
       &lt;li class="border_red"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li class="border_red"&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
       &lt;li class="border_red"&gt;&lt;a href="services.html"&gt;&lt;font color="#cf3533"&gt;Services&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li class="border_red"&gt;&lt;a href="careers.html"&gt;Careers&lt;/a&gt;&lt;/li&gt;
       &lt;li class="border_red"&gt;&lt;a href="news.html"&gt;News&lt;/a&gt;&lt;/li&gt;
       &lt;li class="border_red"&gt;&lt;a href="sitemap.html"&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>And here's the CSS - there's the basic  set up and then a class to put the pipe between the items:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>This sets the pipe on the right.</p>
  
  <pre><code>.border_red {
     border-right: 1px solid #d7d7d7;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I have to be WCAG Priorities 1,2,3-compliant, so I can't just set it manually with <code>&lt;font&gt;</code>.</p>