title: CSS Change List Item Background Color with Class
body: <p>I am trying to change the background color of one list item while there is another background color for other list items.</p>
  
  <p>This is what I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style type="text/css"&gt;
      
  ul.nav li
  {
    display:inline;
    padding:1em;
    margin:1em;
    background-color:blue;
  }
      
      
  .selected
  {
    background-color:red;
  }
     </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav"&gt;
   &lt;li&gt;Category 1&lt;/li&gt;
   &lt;li&gt;Category 2&lt;/li&gt;
   &lt;li class="selected"&gt;Category 3&lt;/li&gt;
   &lt;li&gt;Category 4&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What this produces is all list items with a blue background (from the "nav" class), as if there were no "selected" class. However, when I take out the background color from the "nav" class, I get the red background for the list item with the "selected" class. </p>
  
  <p>I would like to use the "selected" class for other items on the page (i.e. other list items, divs, etc.).</p>
  
  <p>How would I go about solving this?</p>
  
  <p>Thank you in advance.</p>