How does one select elements in a table, but none of the elements in subtables inside of that table?

Question

I have searched and searched, but can't seem to figure out why this is not working.

Goal: set the background color to red for the first td in the first table, while not setting any background colors for the second table.

#table1 > tr > td:nth-child(1)
{
  background-color: red;  
}

/*Ignore this*/
table td{
  padding: 10px;  
  border: 1px solid black;
  border-collapse: collapse;
}

<table id='table1'>
<tr>
  <td>1</td>
  <td>2
  
    <table>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
    
  </td>
</tr>
</table>

Add a `tbody` before the `tr` in your first selector. Browsers automatically add one if you don't specify it in the HTML/ — Heretic Monkey, Mar 17 '17 at 16:40

score 0 · Accepted Answer · answered Mar 17 '17 at 16:42

#table1>tbody>tr>td:first-child
{
  background-color: red;  
}

table td{
  padding: 10px;  
}

<table id='table1' border=1>
<tbody>
<tr>
  <td>1</td>
  <td>2
  
    <table border=1>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
    
  </td>
</tr>
</tbody>
</table>

score 0 · Answer 2 · edited Mar 17 '17 at 16:44

Adding <tbody> fixed it (Thanks Mike!)

#table1 > tbody > tr > td:nth-child(1)
{
  background-color: red;  
}

/*Ignore this*/
table td{
  padding: 10px;  
  border: 1px solid black;
  border-collapse: collapse;
}

<table id='table1'>
  <tbody>
    <tr>  
      <td>1</td>
      <td>2

        <table>
          <tbody>
            <tr>
              <td>3</td>
              <td>4</td>
            </tr>
          </tbody>
        </table>

      </td>  
    </tr>
  </tbody>
</table>

How does one select elements in a table, but none of the elements in subtables inside of that table?

2 Answers2