У меня есть таблица CSS, как это:

(это надежное упрощение моей системы)

<div class="table">
    <div class="row">
        <div class="data">
        abc
        </div>
    </div>
    <div class="row">
        <div class="data">
        def
        </div>
    </div>
    <div class="row">
        <div class="data">
        ghi
        </div>
    </div>
    <div class="row">
        <div class="data">
        jkl
        </div>
    </div>
</div>

И у меня есть CSS, как это:

div.table div.row:not(.hide):nth-child(2n){
    background-color: #D7D4DA;
}
div.table div.row:not(.hide):nth-child(2n+1){
    background-color: #E4E8EB;
}

.hide{
    display:none;
}

Цель состоит в следующем: когда линия скрыта (с использованием класса hide), стилизация таблицы должна оставаться прежней (каждая строка имеет различный цвет между двумя доступными). Вместо этого это сломано.

Согласно Firebox Firebox,:nth-child применяется до:notне после (как я хотел). Как это можно решить?

Примечание: изменение HTML не требуется. Это что-то динамически сделано с использованием JavaScript.

Моя цель не состоит в том, чтобы подсчитывать для n-го потомка строки, которые скрыты, чтобы поддерживать стиль, даже если линия не видна