title: CSS class priorities
body: <p>I have a question about the priority of CSS classes after encountering a problem today. The situation is as follows:</p>
  
  <p>I have an unordered list which has a class associated with it. The <code>LI</code> tags have some styles defined too. I want to change the styling of the <code>LI</code>s after a click (via an added <code>"selected"</code> class), but the added class's styles are never applied. Is this normal behavior or should this code work?</p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.dynamicList
  {
      list-style: none;
  }
  
  .dynamicList li
  {
      display: block;
      width: 400px;
      height: 55px;
      padding: 10px 10px 10px 10px;
      border: 1px solid #000;
      background-color: #ff0000;
  }
  
  .selectedItem
  {
      background-color: #0000ff;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="dynamicList"&gt;
    &lt;li&gt;First Item&lt;/li&gt;
    &lt;li class="selectedItem"&gt;Second (Selected) Item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The background color of the <code>"selected"</code> list item isn't changed. This is also the case if I don't apply the style to the <code>LI</code> element, but create another class and apply that to all the list items so it reads..</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li class="listitem selectedItem"&gt;xxxx&lt;/li&gt;
  </code></pre>