CSS Nested not working the way i want it to!

Question

Well lets say i have this

<table class="infoBox">
    <tr>
        <td>
            test
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        this should not be bold!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

And then we got some css for this

Table.infoBox tr td { font-weight: bold; }

now my problem is that the nested table seems to get the css also when i only want the outer table to get this css how do i define it in a way so that nested tables are not affected by the css?

Answer 1

While you could do this with immediate child, this isn't supported by all browsers. Try:

table.infoBox tr td { font-weight: bold; }

table.infoBox table tr td { font-weight: normal; }

All that the selector table.infoBox tr td says is:

Apply this style to any <td> tag which is a child of any <tr> tag, which is a child of any table with a class of infoBox.

Therefore, you need to get more specific below this style block in order to declare what you want to do for tables within tables of class infoBox.

Answer 2

Either use the child selector:

table.infoBox > tbody > tr > td { font-weight: bold; }

(not supported in IE6)

Note: the mysterious tbody element. This is inserted by the browser if you don't put it in. That's because tables have three sections: thead, tbody and tfoot.In the absence of one of those, rows are added to the tbody element.

or a combination:

table.infoBox tr td { font-weight: bold; }
table.infoBox tr td td { font-weight: normal; }

There are many potential variations of this one.

Answer 3

Table.infoBox table tr td { font-weight: normal; }

Answer 4

It may also suffice to use:

table.infoBox { font-weight: bold; }
table.infoBox table { font-weight: normal; }

or

table.infoBox tr { font-weight: bold; }
table.infoBox table tr { font-weight: normal; }

Though all css depends on other font-weight rules throughout your css, it's handy to note that css declerations are based on decendensy, not direct parent child relation ship. So table{} will have just the same effect on the content as td{} so long as you don't have anything stronger or closer to the content defined.