Q:

Using multiple ">" CSS selectors

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 ?

A:

There are two aspects to what's going on:

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.)
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>

