css - immediate 1st tr 2nd td not working

Question

I'm not sure why below is not working. I'm trying to apply color:red style on the outer table's first tr and second td.

table,
tr,
td {
  border: 1px black solid;
}

#outerTable>tr:first-child>td:nth-child(2) {
  color: red;
}

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table>
    </td>
    <td>
      outer table 1st tr 2nd td -- Only want this Red
    </td>
  </tr>
</table>

score 4 · Accepted Answer · edited Jun 21 '17 at 03:40

4

Because in the DOM there is a tbody tag. Change your code to

#outerTable > tbody > tr:first-child > td:nth-child(2) {

table, tr, td {
border:1px black solid;  
}

#outerTable > tbody > tr:first-child > td:nth-child(2) {
  color:red;
}

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table> 
    </td>
    <td>
      outer table 1st tr 2nd td -- Only want this Red
    </td>
  </tr>
</table>

edited Jun 21 '17 at 03:40

Carl Binalla

5,393
5
27
46

answered Jun 21 '17 at 03:34

slashsharp

2,823
2
19
26

[Further reading as to why `tbody`](https://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements) is automatically generated – justinw Jun 21 '17 at 03:41
@justinw This is rather educational for styling tables. I never knew that `tbody` must be included in styling even when it is omitted in the `html` – Carl Binalla Jun 21 '17 at 03:42

score 0 · Answer 2 · edited Jun 21 '17 at 03:41

The selector should be #outerTable > tbody > tr:first-of-type > td:nth-child(2)

table, tr, td {
border:1px black solid;  
}

#outerTable > tbody > tr:first-of-type > td:nth-child(2) {
  color:red;
}

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table> 
    </td>
    <td>
      outer table 1st tr 2nd td -- Only want this Red
    </td>
  </tr>
</table>

Reynante Daitol · Answer 3 · 2017-06-21T03:57:36.137

.colorRed {
  color: red;
}

table,
tr,
td {
  border: 1px black solid;
}

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table>
    </td>
    <td class="colorRed">
      outer table 1st tr 2nd td -- Only want this Red
    </td>

It is because you didn't specify what part should only be colored red. Add class name on the td that you wanted the text to have color red.

<table id="outerTable">
<tr>
<td>
  outer table 1st tr 1st td
  <table>
    <tr>
      <td>  
        inner table 1st tr 1st td
      </td>
      <td>
        inner table 1tr 2nd td
      </td>
    </tr>
  </table>  
</td>
<td class="colorRed">
  outer table 1st tr 2nd td -- Only want this Red
</td>

In CSS add this:

.colorRed{
 color: red;
}

css - immediate 1st tr 2nd td not working

3 Answers3