title: all elements in class show as even
body: <p>On my webpage there are DIV's that are created dynamically with the class of jOUT.
  I want to change the color of every other iteration of the class.</p>
  
  <p>I'm trying to do it this way:</p>
  
  <pre><code>.jOUT:nth-child(even){
     background:#eeefff;
  }
  
  .jOUT:nth-child(odd){
     background:#cccffe;
  }
  </code></pre>
  
  <p>My HTML is as follows:</p>
  
  <pre><code>  &lt;div id="outData"&gt;
      &lt;input type="hidden" name="outDivider" value="-------"&gt;
      &lt;div class="jOUT isOpaque"&gt;
        &lt;!-- ... --&gt;
      &lt;/div&gt;
      &lt;input type="hidden" name="outDivider" value="-------"&gt;
      &lt;div class="jOUT isOpaque"&gt;
        &lt;!-- ... --&gt;
      &lt;/div&gt;
      &lt;input type="hidden" name="outDivider" value="-------"&gt;
      &lt;div class="jOUT"&gt;
        &lt;!-- ... --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Full HTML <a href="http://jsfiddle.net/p2zgn79r" rel="nofollow">here</a></p>
  
  <p>But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
  I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.</p>