alternate colours in rows - nth child odd / even

by ian_smithz

HTML

<div class="table">
    <div class="row">
        <div>1</div>
        <div>2</div>
    </div>
    <div class="row">
        <div>1</div>
        <div>2</div>
    </div>
        <div class="row">
        <div>1</div>
        <div>2</div>
    </div>
        <div class="row">
        <div>1</div>
        <div>2</div>
    </div>
</div>

CSS

.table {
    display:table;
}
.row {
    display:table-row;
}
.row div {
    display:table-cell;
    padding:4px;
}
.row:nth-child(even) div:nth-child(even) {
    background: blue;
}
.row:nth-child(even) div:nth-child(odd) {
    background: white;
}
.row:nth-child(odd) div:nth-child(even) {
    background: white;
}
.row:nth-child(odd) div:nth-child(odd) {
    background: blue;
}