Form input help on focus without JavaScript

Example to go with my blog post: http://michhimself.com/blog/form-input-help-on-focus/

HTML

<div>
            <label for="form_username">Username</label>
            <input type="text" id="form_username" name="username">
            <div class="info">A valid username consists of letters (a-z) and/or numbers (0-9).</div>
        </div>

CSS

/*Important part is later on*/
body { padding: 10px; }
fieldset div { margin-bottom: 10px; }
label, input { display: block; }
label { font-weight: bold; }
input[type="text"], input[type="password"] { border: solid 2px #999;  padding: 3px; }
input[type="text"]:focus, input[type="password"]:focus { border-color: #000;}

/* This is where the things that matter begin. */

div.info { 
    display:none;
    /* Make sure the info element is initially hidden */
    color: #777;
    font-size: 12px;
    margin: 2px 0; 
    text-indent: 1em;
}
input:focus + div.info { 
    /* This selector selects the div.info that comes right after the focused input. */
    display:block;
   /* Make the element visible */ 
}