开发者

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜