title: jQuery UI CSS not overriding
body: <p>I have some anchor icons that inherit from <code>.ui-widget-content</code> and <code>.ui-state-default</code>. The <code>background-position</code> of <code>.ui-widget-content .ui-state-default</code> is overriding the <code>background-position</code> of <code>.ui-icon-play</code>. </p>
  
  <p><br>When the anchor icons only inherit from <code>.ui-state-default</code>, the background-position of <code>.ui-icon-play</code> has higher priority than that of <code>.ui state default</code>.</p>
  
  <p>I want <code>.ui-icon-play</code> to override <code>.ui-widget-content .ui-state-default</code> so that I get the correct icon image from the image sprite. <br><br>How does the priority get decided when they are both classes and according to chrome dev tools, <code>.ui-icon-play</code> is line 232 of the ui css whereas the <code>.ui-state-default, .ui-widget-content .ui-state-default</code> is line 69?</p>
  
  <p>Also when I do <code>addClass('.ui-icon-play')</code>, the <code>background-position</code> still doesn't override that of the <code>.ui-widget-content .ui-state-default</code>.</p>
  
  <p>Here is simplified version of my code:</p>
  
  <p><b>html</b></p>
  
  <pre><code>&lt;div class="controls-container ui-widget-content"&gt;
      &lt;div class="rep-controls"&gt;
          &lt;a id="play" class="ui-state-default ui-corner-all ui-icon ui-icon-play" 
                 title="Play/Pause"&gt;&lt;/a&gt;
          &lt;a id="stop" class="ui-state-default ui-corner-all ui-icon ui-icon-stop" 
                 title="Stop"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>js</b></p>
  
  <pre><code>$("#play").click(function() {
      if(playing == true) {
          $("#play").removeClass('ui-icon-pause');
      else {
          $("#play").addClass('ui-icon-pause');
      }
  });
  </code></pre>