Q:

Give background to alternate  rows

I have a <DIV> structure table, I want to give background color for alternate rows.
Initially my <DIV> structure was this (as show in Fiddle - *Option 1):*
HTML
<div class="Case">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
</div>

CSS
 .Case {
    border:1px solid #dbdbde;
    font-weight:normal;
}
.group {
    display:table;
    border-top: 1px solid #dbdbde;
    width: 100%;
}
.group div {
    vertical-align:top;
}
.group:nth-child(even) {
    background-color:#f9f9f9;
}
.subdiv {
    display:table-cell;
    border-left:1px solid #dbdbde;
    padding:10px;
    word-wrap: break-word;
}
.subdiv:nth-child(1) {
    border-left:none;
}

It was working Fine!!! BUT when I added one more Row of "Empty" DIV this ".group:nth-child(even) {background-color:#f9f9f9;}" code stopped working.
(as show in Fiddle - *Option 2):*
Here is the NEW code:
HTML
<div class="Case">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
</div>

CSS is same just added as top juist added style for the ".empty" class
   .empty {
    background-color:#ccc;
    display:block;
    width:100%;
    height:15px;
}

Please suggest what am I missing???

A:

Your problem is that nth child counts all the elements, not just the elements of the class that you set in the selector.
One posible solution is not to create a separator div.
Instead, set an aditional class in your container, and then make the divs be more spaced thru a margin-bottom (and a shadow to make the space gray).
HTML (fragment)
<h1>Option 2</h1>

<div class="Case sep">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>

I have deleted the empty rows, and added the sep class to the container.
In the CSS, add 
.sep .group {
    margin-bottom: 15px;
    box-shadow: 0px 15px #ccc;
}

demo

