All geek questions in one place

Misunderstanding a child’s choice

I have some deprecated layouts with nested tables.

I would like the parent table <td> have borders of the same color, but the inner tables do not.

Here:

 <html> <head> <style> table tr td{ border:none; } table.listTable tr td { border:1px solid red; } </style> </head> <body> <table class="listTable"> <tr> <td> left </td> <td> <table style="width:100%;"> <tr> <td> 1 </td> <td> 2 </td> </tr> </table> </td> <td> right </td> </tr> <tr> <td> left </td> <td> doubles </td> <td> right </td> </tr> </table> </body> </html>

How to get subelements with labels 1 and 2 in the upper middle cell so as not to apply red CSS to them by changing the .listTable css selector?

It seems to me that I want:

 table.listTable > tr td

But it completely breaks the selector.

Can someone explain which selector I need, and also why the selector I tried breaks the layout?

This is on jsfiddle: http://jsfiddle.net/nvZbq/

+1
source share
3 answers

Look at the generated markup in Firebug or another dev browser tool of your choice. You will see that <tr> are not children of <table> s. If you are not using <tbody> , the browser will add it for you.

So the selector:

 table.listTable > tbody > tr > td
+4
source 
 table.listTable > tbody > tr > td{ border:1px solid red; }

Add > between tr and td . Remember that this means a direct child, therefore table.listTable > tbody > tr > td describes a table cell (td), which is a direct descendant of a table row (tr), which is a direct child of a table with a listTable class. The nested table inside should not raise the style now.

There are two problems in your original style table.listTable > tr td . First, it means ANY td , which is nested in ANY APPROXIMATION under the table row, which is a direct child of the table with the listTable class. Therefore, the original style applies the red upper border to the auxiliary table. It will do the same for any <td> tag nested below the root table. Secondly, as Matt corrected me below, the browser will add the <tbody> to the table, so you need to include it in the CSS selector chain or the direct <tbody> rules will not work. (Thanks to Matt)

Hope this helps.

+1
source

The problem is the specificity of the selector with borders. It is MORE than one who does not.

There are several ways to do this.

One way is to use ADD specifics for the internal table selector:

 table.listTable table tr td

EDIT NOTE: “child” versus “direct child” comes into play with a “>” in your selector when some browsers add themes and some don't.

 table.listTable tr td { border:1px solid red; } table.listTable table tr td{ border:none; }

example: http://jsbin.com/oyihop/edit#javascript,html,live

0
source

Source: https://habr.com/ru/post/1432162/

More articles:


All Articles