CSS adjacent Siblings Overwriting each other - html

Question

I've noticed when using ~ to select the siblings, the order that the rules occur in the stylesheet is causing them to overwrite one another.
What I would like is every .test after .ColorBlue to be blue and every .test after .ColorRed to be red.
The data is going to be pulled dynamically so the order of the colors will be constantly changing.
Additionally new data can be inserted dynamically so using jquery's "nextUntil" would be pretty impractical.
What am I doing wrong?
.ColorBlue, .ColorBlue ~ tbody.test {
background: blue;
}
.ColorRed, .ColorRed ~ tbody.test {
background: red;
}
<table>
<tbody class="ColorRed">
<tr>
<td>red</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>test</td>
</tr>
</tbody>
<tbody class="ColorBlue">
<tr>
<td>blue</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>≡</td>
</tr>
</tbody>
</table>

Answer 1

You can use the + Adjacent sibling selector to achieve this.
The ~ General sibling combinator will select all elements matching the selector, not just the first. It won't be overwritten by the subsequent rule as it is not more specific than the first rule.
.ColorBlue, .ColorBlue + tbody.test {
background: blue;
}
.ColorRed, .ColorRed + tbody.test {
background: red;
}
<table>
<tbody class="ColorRed">
<tr>
<td>red</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>test</td>
</tr>
</tbody>
<tbody class="ColorBlue">
<tr>
<td>blue</td>
</tr>
</tbody>
<tbody class="test ">
<tr>
<td>≡</td>
</tr>
</tbody>
</table>