title: Active state on click not working (list)
body: <p>I have a little problem with the "active" state in CSS. I have a <code>&lt;ul&gt;</code> in which there are 4 lists and I want to give these links a different <code>background-color</code> (and stay that way!) if they are clicked. The problem is that this won't work...</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;nav id="quick-index-nav"&gt;
  &lt;ul id="quick-index-list" class="pills slim muted"&gt;
  &lt;li class="active"&gt;
  &lt;a id="qindex-popular" title="..." target="right" href="right.php"&gt;everything&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a id="qindex-today" title="..." target="right" href="right.php?t=tod"&gt;today&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="yesterday"&gt;
  &lt;a id="qindex-yesterday" title="..." target="right" href="right.php?t=yes"&gt;tomorrow&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a id="qindex-day" title="...." target="right" href="right.php?t=mix"&gt;never&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and this is my CSS file:</p>
  
  <pre><code>#quick-index-nav{margin-bottom:10px; margin-left: -50px;}
  #quick-index-list{margin-bottom:0;*zoom:1;border:0px ridge #d9d9d9}
  #quick-index-list:before,#quick-index-list:after{display:table;content:""}
  #quick-index-list:after{clear:both}
  #quick-index-list li{display:inline-block;float:left;width:25%;margin:0;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-right:0px ridge #d9d9d9}
  #quick-index-list li:nth-child(4n){border-right:0px}
  #quick-index-list li:nth-child(n+5){border-top:0px ridge #d9d9d9}
  #quick-index-list li&gt;a{padding:0;display:block;font-size:1.0em;text-align:center; font-family: Calibri;}
  
  .pills&gt;li{display:inline-block;margin-bottom:5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #d9d9d9}
  .pills&gt;li&gt;a{padding:6px 10px;cursor:pointer;display:inline-block}
  .pills&gt;li&gt;a:hover{text-decoration:none}
  .pills&gt;li:hover{background-color:#d9d9d9;text-decoration:none}
  .pills&gt;li.active{background-color:#456695;border-color:#456695}
  .pills&gt;li.active&gt;a{color:#fff}
  .pills.slim&gt;li&gt;a{padding:3px 5px;font-size:.9em}
  .pills.muted&gt;li&gt;a{color:gray}
  .pills.muted&gt;li.active&gt;a{color:#fff};
  .muted {
      color: gray;
  }
  </code></pre>
  
  <p>What is wrong with it? </p>
  
  <p>PS: here is a demo <a href="http://jsfiddle.net/1BJK903/fxTQL/1/" rel="nofollow">http://jsfiddle.net/1BJK903/fxTQL/5/</a></p>