Use Less or CSS to repeat previous sibling's style

Question

Question

Is there a clean way to apply a style for all sibling elements between two HTML elements?

Background

I have a table with bootstrap's .table-striped class, however, I want an arbitrary number of rows to be striped together as a group. My solution was to create a custom element using

document.registerElement("seq-tr");

and extend the tr:nth-child(odd/even) to tr:nth-of-type(odd/even), as well as to ...tr:nth-of-type(odd/even) + seq-tr:

.table.table-striped {
    > thead, tbody, tfoot {
        > tr {
            ~ seq-tr > td {
                border-top: none;
                padding-top: 0;
                white-space: nowrap;
            }

            &:nth-of-type(even) {
                &, + seq-tr {
                    background-color: @table-bg;
                }
            }

            &:nth-of-type(odd) {
                &, + seq-tr {
                    &:extend(.table-striped > tbody > tr:nth-child(odd));

                    > td:extend(.table-striped > tbody > tr:nth-child(odd) > td) {
                    }
                }
            }
        }
    }
}

Aside: Originally I had tried using the ~ selector instead of +, but that applied both :nth-of-type(even) and :nth-of-type(odd) to every <seq-tr> after the second row and whichever was later in the compiled CSS file took precedent, rather than being smart about it and looking for whether the closest sibling <tr> was even or odd.

So the above code works for the first <seq-tr> element, but for the following <seq-tr>s, it does not.

Is there a clever way to make this work for any number of consecutive <seq-tr>s?

I could use a seq-tr.striped class, but I would rather not.

Edit

It just occurred to me I could simply use multiple <tbody> elements, and style the rows based on even/oddness of those, rather than the rows themselves.

Can we have multiple <tbody> in same <table>?

I'd still like the answer to my question for other purposes, but it's less pressing now.