I&#39;m trying to zebra stripe my divs in my website, sounds simple enough, however I&#39;ve found that when I added a header in between the rows of my divs it seems to count the header in the odd/even styling

HTML

    &lt;div class=&quot;container&quot;&gt;
        &lt;h3&gt;Title&lt;/h3&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;h3&gt;Title&lt;/h3&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;h3&gt;Title&lt;/h3&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;Content&lt;/div&gt;
    &lt;/div&gt;

CSS

    .container {
        width:600px;
        margin:0 auto;
    }
    
    .row {
        line-height:24pt;
        border: solid 1px black;
    }
    
    .row:nth-child(odd) {
        background: #e0e0e0;
    }
    
    h3 {
        line-height:36pt;
        font-weight:bold;
        color:blue;
    }

[fiddle](http://jsfiddle.net/exrWm/1/)

I would have thought that the code already in the fiddle would basically ignore the header and carry on striping, but it appears that it considers the header as a child


All Zebra Striping Solutions on Gang of Coders

Total of 1 Zebra Striping Solutions

CSS div alternating colour