JSFiddle - React, Tailwind, and code Playground

HTML

<table class="grid">
    <tr class="parent"><td>nono1</td></tr>
    <tr class="parent"><td>nono2</td></tr>
    <tr class="parent"><td>nono3</td></tr>
    <tr class="parent"><td>nono4</td></tr>
    <tr class="display-none"><td>nono5</td></tr>
    <tr class="parent"><td>nono6</td></tr>
    <tr class="parent"><td>nono7</td></tr>
    <tr class="parent"><td>nono8</td></tr>
</table>

CSS

.parent:nth-child(odd) {
        background-color: #fff;
        }
        .parent:nth-child(even) {
            background-color: red;
        }

        /* after the first non-.parent, toggle colors */
        tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: red;
        }
        tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: #fff;
        }

        /* after the second non-.parent, toggle again */
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: #fff;
        }
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: red;
        }
        .display-none * {
            display: none;
        }