[css3-selectors] Elements that can have :focus pseudo-class

The CSS3 Selectors Working Draft states that:

	• The :focus pseudo-class applies while an element has the focus  
(accepts keyboard or mouse events, or other forms of input).

and that:

	Selectors doesn't define if the parent of an element that is  
':active' or ':hover' is also in that state.

and:

	Selectors doesn't define if the parent of an element that is  
':active' or ':hover' is also in that state.

However, I think there should really be a stronger correspondence  
between what JavaScript considers focused or not (via the "focus" and  
"blur" events) and what CSS considers focused or not.

For instance, consider the following CSS and body tag:

<head>
	<style type="text/css">
		body { background-color:red; }
		body.focus { background-color:green; }
	</style>
</head>
<body onfocus="document.body.className='focus';"  
onblur="document.body.className='';" class="focus">

With this, the background-color of the body will turn green when it  
comes into focus, and turn red when another window or frame gains  
focus. And when it has focus, it will not lose it do to something else  
in the same window (including a link, but not including an iframe)  
gains focus.

It should be the same for the ":focus" pseudo-class. But it isn't.  
BODY:focus doesn't work at all (at least not in Safari or Firefox).  
The following SHOULD produce the same results (but doesn't):

<head>
	<style type="text/css">
		body { background-color:red; }
		body:focus { background-color:green; }
	</style>
</head>
<body>

So I propose adding a line to the spec that says something like this:

Elements that are matched by :focus should be the same elements that  
have received the "focus" event in an applicable event-driven  
scripting language such as JavaScript. Elements that receive the  
"blur" event should no longer be matched by the :focus pseudo-class.


There's probably a better way to say that, but you get the idea. There  
does not seem to be a corresponding problem with :active, as clicking  
and holding the mouse down on the body will change its background- 
color when you have the following:

body:active { background-color:yellow; }

Received on Sunday, 16 November 2008 19:04:02 UTC