title: applying css to specific li class
body: <p>I have a problem with my list.</p>
  
  <p>I want to specify certain colors for each <code>li</code> element but can't seem to do it.  It keeps doing it for all of them.  </p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#sub-nav-container ul
  {
      position: absolute;
      top: 96px;
      left: 594px;
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  
  #sub-nav-container li 
  {
      margin: 0;
  }
  
  #sub-nav-container a
  {
      display: block;
      text-decoration: none;
      border-bottom: none;
      color: #C1C1C1;
      display: inline;         
  }
  
  li.sub-navigation-home-news  
  {
      color: #C1C1C1;
      font-family: Arial;
      font-size: 13.5px;
      text-align: center;
      text-transform: uppercase;
      padding: 0px 90px 0px 0px; 
  }
  </code></pre>
  
  <p>Here's the HTML</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="sub-nav-container"&gt;
      &lt;ul id="sub-navigation-home"&gt;
          &lt;li class="sub-navigation-home-news"&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li class="sub-navigation-home-careers"&gt;&lt;a href="#"&gt;Careers&lt;/a&gt;&lt;/li&gt;
          &lt;li class="sub-navigation-home-client"&gt;&lt;a href="#"&gt;Client Login&lt;/a&gt;&lt;/li&gt;
          &lt;li class="sub-navigation-home-canada"&gt;&lt;a href="#"&gt;CANADA&lt;/a&gt;&lt;/li&gt;
          &lt;li class="sub-navigation-home-usa"&gt;&lt;a href="#"&gt;USA&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>