CODEWITHSUNDEEP
css
Callie
Callie

Reputation: 11

How to avoid inherit parent css

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;
}

Upvotes: 1

Views: 1363

Answers (2)

Brad Mace
Brad Mace

Reputation: 27886

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

Upvotes: 3

chris_sutter
chris_sutter

Reputation: 2372

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;
}

Upvotes: 1

Related Questions