Select all the table cells, but not the embedded table's cells
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>
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.
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/
精彩评论