Question

So, I have a simple login page that has a light green background, and would like to change the background color to a light red when the ‘loginbox’ div with id = ‘loginbox’ also has a class ‘error’. My page looks as follows:

VALID HTML http://i1154.photobucket.com/albums/p525/covertcj/ScreenShot2012-01-16at20759PM.png

with the relavent HTML looking like:

HTML (Before adding error class):

<div id="loginbox">
    <span>Username:</span>
    <input>

    <span>Password:</span>
    <input>

    <button>Submit</button>
</div>

With the CSS given below, I feel that this should work; however, when adding the error class to the div, nothing happens.

CSS:

#loginbox {
    margin: auto;
    padding: 25px 50px;
    width: 300px;
    height: 100px;
    border: 1px solid #e9e9e9;
    background: #EBFFEF; 
}
#loginbox .error {
    background: #FFEBEB; 
}
#loginbox input {
    height: 15px;
    margin: 3px 0px;
    width: 190px;
    float: right;
}
#loginbox span {
    height: 15px;
    width: 60px;
    margin: 3px 0px;
    padding: 3px 0px;
    float: left;
}
#loginbox button {
    margin-top: 30px;
    float: right; 
}

HTML (After after error class):

<div class="error" id="loginbox">
    <span>Username:</span>
    <input>

    <span>Password:</span>
    <input>

    <button>Submit</button>
</div>

Am I possibly misusing this technique? Any help in this matter would be greatly appreciated.

Thanks,
Chris Covert

Answer 1

Your selector is incorrect: #loginbox .error is selecting all elements with class error contained within the element selected by #loginbox. This works exactly the same way that #loginbox input works – You’re selecting input elements within the #loginbox div.

To refine a selector with additional class/attribute selectors, you need to chain them together without whitespace. In your specific example, remove the space and use:

#loginbox.error { ... }

Always remember, seperating your selectors by whitespace means you’re selecting nested tags.