Select all the table cells, but not the embedded table's cells

Question

How do I select the cells in a table but not the cells of an embedded table? There is a question on how to do this in JQuery. I need to do this in CSS.

<table id="Outer">
    <tr>

        <td> --this one
        </td> 

        <td> --this one
            <table>
                <tr>
                    <td></td> -- but not this one or any deeper nested cells
                </tr>
            </table>
        </td>

    </tr> 
</table>

Answer 1

You can use >, the child selector.
Example:

table#Outer > tbody > tr > td { color: red; }

The child selector selects only direct descendents. More on the child selector: http://meyerweb.com/eric/articles/webrev/200006b.html. But it's not supported by every web browser: http://www.quirksmode.org/css/contents.html.

Answer 2

As given by a comment in the linked question:

table#Outer > tbody > tr > td {  }

Note that because of cascading, changes will apply to the inner table as well unless you provide a default override style for all cells:

td { background-color: white; }
table#Outer > tbody > tr > td { background-color:red; }

http://jsfiddle.net/95NAd/