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

On Sunday 2008-11-16 11:03 -0800, Brad Kemper wrote:
> 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.

But in this case it's not actually the body that has the focus.
Depending on the browser, it's either the document or the window.
However, there's a convention of using some event handling
attributes on the body for events that are targetted at the Document
or the Window.

Try the following testcase:

<title>Focus on BODY?</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function pr(e, s) {
  var out = document.getElementById("out").firstChild; += e.type + " " + + "\n";
<body onfocus="pr(event)" onblur="pr(event)">
<input type="text">
<iframe src="about:blank"></iframe>
<pre id="out">Results:

(Note that there's a good bit of variation between browsers, but in
Opera, Firefox, and Webkit I haven't gotten that testcase to show a
focus or blur event sent to anything other than the document or


L. David Baron                       
Mozilla Corporation             

Received on Sunday, 16 November 2008 19:31:23 UTC