使用多个“>”CSS选择器

Question

Given this html :

<table id="my-table">
  <tr>
    <td>
       I want to apply my style to this
    </td>
    <td>
      <table>
        <tr>
          <td>
            But not to this
          </td>
        </tr>
      </table>  
    </td>
  </tr>
</table>

I would like to apply style to the cells that are first level children of the table.

I thought I could use this :

#my-table > tr > td {
    color: #ff0000;
}

... But it doesn't work. Is it because you can't use multiple > selectors ? How can I do it ?

Answer 1

There are two aspects to what's going on:

1. The browser will insert a tbody element if you don't include one (or at least, most do, most of the time; I always use an explicit one, so I don't know the edge cases), and so even if you don't have it in your HTML, you need it in your selector if you're using > (the child combinator). That would change your selector to #my-table > tbody > tr > td . (I advocate always including tbody explicitly in the HTML, just to avoid confusion and edge cases.)

2. The table inside the td inherits its color from the td it's inside. So although your selector targets the correct elements, their descendant elements inherit the color.

You can work around that by giving an explicit color to #my-table td elements, and then the special color only to #my-table > tbody > tr > td elements.

Example (note the tbody in the HTML and also in the selector):

 #my-table td { color: black; } #my-table > tbody > tr > td { color: #ff0000; } 

 <table id="my-table"> <tbody> <tr> <td> I want to apply my style to this </td> <td> <table> <tr> <td> But not to this </td> </tr> </table> </td> </tr> </tbody> </table> 

In a comment you've said you don't control the inner table. If you control the outer table, you can solve this by just putting a class on the cells you want to apply the rule to, and then have the rule only apply to td s with that class:

Example (note the tbody in the HTML and also in the selector):

 #my-table > tbody > tr > td.first { color: #ff0000; } 

 <table id="my-table"> <tbody> <tr> <td class="first"> I want to apply my style to this </td> <td> <table> <tr> <td> But not to this </td> </tr> </table> </td> </tr> </tbody> </table> 

Answer 2

Hi now you can try to this way

 #my-table > tbody> tr > td { color: #ff0000; } #my-table td{color:#000;} 

 <table id="my-table"><tbody> <tr> <td> I want to apply my style to this </td> <td> <table><tbody> <tr> <td> But not to this </td> </tr></tbody> </table> </td> </tr></tbody> </table> 

The tag is used to group the body content in an HTML table.

The element is used in conjunction with the and elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The tag must be used in the following context: As a child of a element, after any , , and elements.

more about tbody

Answer 3

As far as I see it you need the :first-child as well, otherwise you are stil hitting the last TD, if you want a border on it:

  #my-table > tbody > tr > td:first-child { color: #ff0000; border: 1px solid black; } 

 <table id="my-table"> <tr> <td> I want to apply my style to this </td> <td> <table> <tr> <td> But not to this </td> </tr> </table> </td> </tr> </table> 

Answer 4

color has the property that it's being applied to all of it's childs. Therefor you will need to limit it. You can do this with > and :nth-child(n)

#my-table > tbody > tr > td:nth-child(1) {
    color: #ff0000;
}

Your HTML should have a tbody but it might not be necessary, browsers will create them for you, but it's advised to use tbody yourself.

You can modify this if your tables are getting larger.. for example with using formulas like 3n+1 , odd/even etc.. also you can use multiple spaces or > and element tags to specify all your needs. Depending on what you want.

More info about nth-child() here