CSS: Cascade just one level

Question

Say i have a <table> with a css class defined (<table class="x">) and i want to change the 'color' property of just the first level of <td>, is this possible using css without setting classes on the relevant <td>?

I.e.

<table class="x"><tr><td>
  xxxx
   <table><tr><td>yyy</td><tr></table>
</td></tr><table>

I only want the xxxx to change color - so .x td{color:red;} will currently apply to xxxx and yyyy when i only want xxxx targeted, but would rather not give the xxxx td a class name

Answer 1

Try this:

table.x > tr > td { ... }

The > is the immediate child selector.

Answer 2

One option would be to override the cascade effect by setting the second level to what you want, allowing you to cancel out the effects on the top level.

Something like this:

table.x tr td { ...}

table.x tr td table tr td { ... }

The first statement will apply to all td's under the .x table, but then the second statement will override that for the inner nesting levels (and anything below them). Since it comes after the first statement, it will override anything set in statements above.

This also will work in IE because it uses the more basic construction of ancestors/descendants rather than children, which are not as well supported.

Answer 3

Note that the > direct child selector is unsupported in IE6, so cdeszaq's method, while more verbose than Andrew Hare's, will still work in hellbrowser.