Question

#messageContainer td 
    {
        cursor: pointer;
        border-bottom: 1px solid #2A2A2A;
        padding-bottom: 3px;
        padding-top: 3px;
        background-color: #F0F0F0;
    }

    .messageNew
    {
        background-color: #FFFFFF !important;
    }

HTML:

<tr replytoid="3" messageid="2700" id="15" class="messageNew">
    <td>&nbsp;&nbsp;<input type="checkbox" name="checkAll"></td>
    <td>Rick Hagar</td>
    <td>asd</td>
    <td>3/14/2012 1:09:04 PM</td>
</tr>

I cannot figure out what I am doing wrong. Right now as it stands every single <td> has the #F0F0F0 background color. And the rows with the class .messageNew are not being changed to the background color #FFFFFF.

What is even stranger, is if I reverse the colors. I remove the background color #F0F0F0 and change #FFFFFF it works properly.

The client wanted it changed so new messages now have a white background and the read messages have the #F0F0F0 background.

I added the !important but it doesn’t seem do make any difference.

Answer 1

#messageContainer td has a higher specificity than .messageNew and so will “win”. Try: `#messageContainer .messageNew td (you can omit the !important)