title: Override one css class with another?
body: <p>I have a list, with an li style defined. I want to replace the style of an individual element, but it doesn't seem to have any visual effect. Example:</p>
  
  <pre><code>.myList li {
    background-color: yellow;
  }
  
  .foo {
    background-color: green;
  }
  
  &lt;ul class='myList'&gt;
    &lt;li&gt;Hello&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I add an item to the list, it has the .myList li style applied properly. I try now to remove all styles and apply the foo style to a single item (using jquery):</p>
  
  <pre><code>$(item).removeClass();
  $(item).addClass("foo");
  </code></pre>
  
  <p>the item does not change color to green though, but this reports the class is set to 'foo':</p>
  
  <pre><code>alert($(item).attr('class'));
  </code></pre>
  
  <p>so I guess I'm not understanding css rules here, looks like the li class definition is just overriding whatever else I do, however I want the reverse to be true, I want to override the li style definition with foo. How do we do this?</p>
  
  <p>Thanks</p>