1

I have the following tables set up on a page:

<div id="schedule">
    <table class="tableListings">
        <tbody>
            <tr class="tableDate">
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr class="tableDate">
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

I need to set the background color only on the <td>s whose <table> does not have a <tr> with a class of "tableDate".

How can I do that?

It would be preferable if I could do this purely with CSS, but if it would be easier (or necessary) I can use jQuery also/instead.

5 Answers 5

6

Try this CSS: {for simple case}

table tr:not(.tableDate) td{
   background-color:red;
}
0
3

If I understand correctly:

$('td').filter(function(){
    return !$(this).closest('table').find('tr.tableDate').length;
}).css('background-color', '#00f');

Which selects all td elements, then filters them according to whether the closest table ancestor has no tr element with a class of tableDate.

If, however, you need to only if the parent tr has the class (not checking the whole table for any tr with that class):

$('td').filter(function(){
    return !$(this).closest('tr.tableDate');
}).css('background-color', '#00f');

I'm not sure (besides compatibility reasons) why you can't just use :not(.tableDate), but for cross-browser compatibility:

td {
    background-color: #00f; /* special colour for non-.tableDate descendants */
}

.tableDate td {
    background-color: #fff; /* to override the 'special' colour for those td
                               elements that *are* within a .tableDate element */
}
2

CSS

tr
{
 background-color:blue;   
}
.tableDate
{
     background-color:white;
}

Working Demo http://jsfiddle.net/cse_tushar/X9rhS/

2

If you want a CSS(3) only solution, try:

table.tableListings tr:not(.tableDate) td {
    background-color:#999;
}

jsFiddle example

2

Try this. It will be help you.....

        table tr:not(.tableDate) td{
            background-color: yellow;
        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.