title: having 2 different styles for ui-state-default and ui-selected
body: <p>at the moment, i am using the <code>selectable</code> JQUERY function</p>
  
  <pre><code>&lt;style&gt;
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
  &lt;/style&gt;
  
  
  &lt;ol id="selectable"&gt;
    &lt;li class="ui-widget-content"&gt;Item 1&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 2&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 3&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 4&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 5&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 6&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 7&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>but for some reason, when i select an element, the color will not change to bright orange but revert to the default gray of <code>ui-state-default</code> like below:</p>
  
  <p><img src="https://i.stack.imgur.com/9RW9c.jpg" alt="incorrect color of selected element"> </p>
  
  <p>But if I go to the Chrome debugger and uncheck the background in ui-state-default in the style section, it works perfectly.</p>
  
  <p><img src="https://i.stack.imgur.com/68h4B.jpg" alt="unchecking background of ui-state-default in Chrome debugger"> </p>
  
  <p><img src="https://i.stack.imgur.com/Iluni.jpg" alt="correct color of selected and unselected elements"></p>
  
  <p>Is it because of this snippet:</p>
  
  <pre><code>var nodes = document.getElementById('selectable').getElementsByClassName('ui-widget-content');  
        if (nodes.length &gt; 0)
        {
          nodes[0].innerHTML = getSymbol();
          nodes[0].setAttribute("class", "ui-state-default");
        }
  </code></pre>
  
  <p>How do i go around this problem, such that when i click on the element of interest, the color will change like i specified in the <code>&lt;style&gt;</code> tag.</p>