Css selector nth sibling and stops if it encounters another parent class

Is it possible to have an nth sibling selector for the code below?

So far this is what I've done.

HTML

<table>
  <tr class="parent" path="0"></tr>
  <tr class="child" path="0,1"></tr>
  <tr class="child lastChild" path="0,2"></tr>

  <tr class="parent" path="1"></tr>
  <tr class="child" path="1,1"></tr>
  <tr class="child lastChild" path="1,2"></tr>
</table>

CSS

.parent:hover ~.childRow {
  border: 2px solid blue;
}

NOTE: I'm using React material table which is why the rows, even though one is the parent are on the same level. There were a few solutions to highlighting the row of the parent and the children, but it involves re-rendering which is quite an expensive operation, Hence why I'm trying to find a pure css solution.

The problem with this is that if I hover on the first parent, it also highlights the children of the second parent.

Maybe I should use the path attribute? Or is there a css selector that selects adjacent sibling from top to bottom, but stops as soon as it sees another "parent" class?

Is this even possible?

Another addition:

Would it help if the very last child can have an additiona class such as 'lastChild', as a sort of stopper?

from Css selector nth sibling and stops if it encounters another parent class