Using multiple ">" CSS selectors

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 tds 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