开发者

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

开发者 https://www.devze.com 2023-03-02 13:34 出处:网络
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.

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

精彩评论

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