N-level nested HTML elements with nth-of-type CSS?

Question

I have an arbitrary number of nested rows in an angular component, and I'd like to apply nth-of-type(even) to all the elements based on its position relative to the entire table. How might I do this? I have tried the answer given here: CSS nth-of-type selector with nested elements

But, as mentioned, it did not apply throughout my table (breaking at the third level down).

<table>
  <div *ngFor="let node of tree">
    <my-component [node]="node"></my-component>
  </div>
</table>

where my-component is:

<tr>
  <td> ... </td>
  <td> ... </td>
</tr>
<div *ngIf="shouldShowChildren()">
  <div class="inner-component" *ngFor="let child of children">
    <my-component [node]="child"></my-component>
  </div>
</div>

Given that I don't know the height of the tree before hand, how can I still apply this style?

By tree I mean this data structure:

Node {
  key: string,
  children: Node[];
}