Примените стиль CSS к первому элементу типа, когда уже используете: nth-child

Question

В следующем примере я не хотел бы применять какой-либо цвет фона к ячейке Not here....

Другими словами, я хотел бы применить свой CSS .class tag:modifer только для первого дочернего элемента типа tag.

.foo {
border-collapse: collapse;
}

.foo tr:nth-child(1) td:nth-child(1) {
background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
background-color: red;
}

<table class="foo">
  <tr><td>A</td><td>B</td></tr>
  <tr><td>C</td>
  <td>
     <table><tr><td>Not here...</td></tr></table>
  </td>
  </tr>
</div>

Answer 1

Вы можете переопределить стиль, используя другой селектор:

.foo {
  border-collapse: collapse;
}

.foo tr:nth-child(1) td:nth-child(1) {
  background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
  background-color: red;
}

.foo table td:not(#random_id_for_specificity){
  all:initial; /*to override everything*/
}

<table class="foo">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>
      <table>
        <tr>
          <td>Not here...</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

1. Использовать прямой потомок комбинатор >
2. Найдите предка выше дерева <div>
3. Использование nth-of-type

div > table > tbody > tr:first-of-type > td:first-of-type 

.foo {
  border-collapse: collapse;
}

div>table>tbody>tr:first-of-type>td:first-of-type {
  background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
  background-color: red;
}

<div>
  <table class="foo">
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
      <td>
        <table>
          <tr>
            <td>Not here...</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>