[whatwg] Making elements match the :active pseudoclass

Tue Dec 28 13:27:35 PST 2010

Currently, <http://www.whatwg.org/specs/web-apps/current-work/complete/links.html#pseudo-classes>
states that the only elements which can receive the :active
pseudoclass are a handful of form elements and any other element which
is "specially focusable".

This does not match any current browser.  All 5 of the major browsers
allow any element to be :active when clicked.  They do differ slightly
on how they determine when an element is :active, though:

* Firefox and Webkit make the target of clicks and all its ancestors :active.
* IE8 and IE9 make only the target of the click :active
* I'm not 100% sure about Opera's behavior, but it appears that it
finds the first ancestor of the target which would match an :active
rule, and makes that element :active.

You can see this behavior in the following two example pages:

<!doctype html>
<style>
:active { border: 2px solid red; }
</style>
<p>foo <a href="">bar <span>baz</span></a></p>

<!doctype html>
<style>
p:active { border: 2px solid red; }
</style>
<p>foo <a href="">bar <span>baz</span></a></p>

(The pages may exhibit surprising behavior - remember that <html> and
<body> are present in the DOM as well and can potentially match
:active.)

~TJ