Form input help on focus without JavaScript

Example to go with my blog post:

by mich

HTML

<form action="/user/signup" method="post">
    <fieldset>
        <div>
            <label for="form_username">Username</label>
            <input type="text" id="username" name="username">
            <div class="info">A valid username consists of letters (a-z) and/or numbers (0-9).</div>
        </div>
        <div>
            <label for="form_email">Email</label>
            <input type="text" id ="form_email" name="email">            
            <div class="info">We will send you an email to validate your account.</div>
        </div>
        <div>
            <label for="form_password">Password</label>
            <input type="password" id ="form_password" name="password">            
            <div class="info">Your password should be at least 6 characters long.</div>
        </div>
        <div>
            <label for="form_passwordretype">Repeat Password</label>
            <input type="password" id ="form_passwordretype" name="passwordretype">            
            <div class="info">Please repeat your password to ensure you haven't made any mistakes.</div>
        </div>
        <div>
            <input type="submit" value="Sign up!">
        </div>
    </fieldset>    
</form>

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 */ 
}