A style that uses nth-child to refresh an aspect of a table (alternating row colors)

Question

I have a CSS table like this:

(this is a reliable simplification of my system)

<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>

And I have this 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;
}

Purpose: When a row is hidden (using class masking), the style of the table should remain unchanged (each row has a different color between the two available). Instead, it will break.

According to firefox, firefox :nth-childapplies before :not, not after (as I wanted). How can this be solved?

Note. Changing the HTML is not an option. This is something dynamically done using javascript.

My goal is not to count nth-child lines that are hidden to maintain style, even if the line is not visible.

Answer 1

CSS (CSS3)

, (. ), , css ( , div , html-), linear-gradient ( ) table. , font-size ( ), background-size line-height .

:

• line-height font-size row em ( . № 5 ).
• padding table ( ), , , - background-position background-clip .
• padding margin row, em line-height linear-gradient.
• , (. ).
• - ( 20 ), row linear-gradient .

, № 2 № 3 , , , , .