title: basic css li active only for some elements
body: <p>I have two HTML lists I need one to select my "active" class and the other to ignore it.</p>
  
  <p>Here is my css, I show an image "icon-plus.gif" and when user click the li the image change to "icon-minus.gif"</p>
  
  <pre><code>    li:before {content: url("icon-plus.gif");}
      li.active:before {content: url("icon-minus.gif");}
  </code></pre>
  
  <p>And then I have a two lists, and all the li show the image "icon-plus.gif" when I click it image change.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Coffee&lt;/li&gt;
    &lt;li&gt;Milk&lt;/li&gt;
  &lt;/ul&gt; 
  
  &lt;ul&gt;
    &lt;li&gt;Bread&lt;/li&gt;
    &lt;li&gt;Apples&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>both are showing the images!!! Really don't understand why, my idea it was having the class inside the li:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class"active"&gt;Coffee&lt;/li&gt;
    &lt;li class"active"&gt;Milk&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>Code was downloaded from internet.Thanks</p>