title: When exactly does the :active pseudo class get applied
body: <p>I was trying to use <code>querySelector</code> to find active elements in a page. I assumed that a handler bound to a mousedown event on the document would trigger <em>after</em> the event had bubbled its way back from the target, which means the <code>:active</code> pseudoclass should already be applied.</p>
  
  <pre><code>document.addEventListener("mousedown",function(e){
  
      console.log(document.querySelector("*:active"));// logs null
  
      // expected value was the target of the mousedown event, that is,
      console.log(e.target);
  
  });
  </code></pre>
  
  <p>My question is: at what point exactly does the the <code>:active</code> pseudo-class apply? Note that when I log the value, the <code>mousedown</code> event has already triggered on the target.</p>
  
  <p>See <a href="http://jsfiddle.net/tK67w/2/" rel="nofollow">http://jsfiddle.net/tK67w/2/</a> for an example. An interesting thing to note here is that if you set a breakpoint within the handler, you can see the css rule I defined for <code>a:active</code> already applying, although <code>querySelector</code> is returning <em>null</em></p>
  
  <p>EDIT: </p>
  
  <p>Credit goes to TJ for coming up with a much better <a href="http://jsfiddle.net/tK67w/7/" rel="nofollow">demonstration</a>. The problem still stands though: in browsers other than IE and Chrome, how can I get an HTMLCollection of all active elements as they become active?</p>