CSS nth-child property does not work correctly when dynamically adding items

Question

I have some divs defined in my page

<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>

I have added a css property

.alternating:nth-child(even){
    background: #FF0000;
}

On the loading the page everything seems fine and the even rows are colored. But when I add a new div to the parents of this divs (using Knockout and jquery) the newly adding row does not show the right color. That means if my last line was odd (no color) the newly added div also appears with no color. Or if the last div was even (with color) the newly added div also appears with color.

But after that it works out normal again. My problem is only on the addition of the 1st div.

Any ideas?

Answer 1

Here's a little FIDDLE in which I start with divs in the DOM, then add them by a click.

Relevant: JS

$('.button').click(function() {
    $('.holder').append("<div class='inside'>dynamic div</div>");
});

Relevant CSS

.holder {
    width: 300px;
    height: 400px;
    border: 1px solid black;
}
.inside {
    height: 30px;
    border: 1px solid black;
}
.inside:nth-child(even) {
    background-color: blue;
}