How to avoid inherit parent css

Question

I have my Login Page which contains another div of Login information (username and password). My css setting for the div header color is WHITE. However, I would like the wording in the Login div to be GREEN. I have created a different css style for the Login div, however it still applies the css from parent div header. Below is my code:

login.jsp

<div id="header">
    <div id="bannerLogin" >
        <table width="300px" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="right">
                    <span class="writeupCopy">
                        <bean:message key="login.userId" bundle="label"/>
                    </span>
                </td>
                <td align="left">
                    <html:text styleId="username" property="username" size="20" tabindex="0" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    <span class="writeupCopy">
                        <bean:message key="login.password" bundle="label"/>
                    </span>
                </td>
                <td align="left" valign="bottom">
                    <input name="password" size="20" tabindex="0" value="" id="password" type="password">&nbsp;
                    <input name="btnSave" id="submit" type="image" src="${initParam.CONTEXT_PATH}/images/common/login.arrow.png" height="20px" width="20px" border="0">
                </td>
            </tr>
        </table>
    </div>
</div>

stylesheet.css

#header, #footer { 
    width: 100%;
    border-collapse: collapse;
    background-color: #4681C4;
}

#header td, #footer td { 
    color: white;
    line-height: 1.2em;
    padding: 1px 5px;
}

#bannerLogin {
    color: green;
    float:right;
    height:104px;
    margin-left:0;
    margin-top:0;
    width:300px;
}

Please edit the question when you want to add more information, or leave comments to reply directly to answers. Also, I reformatted your code for readability, so you may want to check it to make sure I "fixed" it right. :) Welcome to Stack Overflow. — Bill the Lizard, Nov 06 '10 at 13:07

score 3 · Answer 1 · edited May 23 '17 at 12:19

3

The white property is taking priority because that selector is more "specific" in the scheme of CSS selectors.

Add a separate selector applying the color to the TDs in the login banner:

#bannerLogin td {
    color: green;
}

You can look at this question for more about selector priority: CSS: Understanding the selector's priority / specificity

edited May 23 '17 at 12:19

Community

1
1

answered Nov 06 '10 at 04:04

Brad Mace

27,194
17
102
148

...and make sure it is after the '#header td, #footer td" declaration. If selectors have the same specificity then the last one wins. – Chris Bentley Nov 06 '10 at 04:07

score 1 · Answer 2 · answered Nov 06 '10 at 04:05

Because the #header td applies to the table cell which is further down the HTML tree than the #bannerLogin (which applies to the bannerLogin div).

One way of solving this: Take out the color from the #bannerLogin definition and put it into something more specific, such as:

#bannerLogin td {
  color: green;
}

How to avoid inherit parent css

2 Answers2