title: nth-child in a WordPress loop?
body: <p>I'm trying to figure out how I can use nth-child to make every other instance of a div with the class "mask" change color. I have a template code that loops over and over on a page. Here it is:</p>
  
  <pre><code>&lt;div class="view"&gt;  
       &lt;?php echo get_the_post_thumbnail( $post-&gt;ID, 'clip-thumb' ); ?&gt;  
       &lt;div class="mask"&gt;  
          &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;  
          &lt;p&gt;Your Text&lt;/p&gt;  
          &lt;a href="#" class="info"&gt;Read More&lt;/a&gt;  
       &lt;/div&gt;  
  &lt;/div&gt; 
  </code></pre>
  
  <p>I want all the odd instances to be one color and all the even instances to be another. This was the code I was hoping would work:</p>
  
  <pre><code>.view .mask {
      width: 326px;
      height: 280px;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0
  }
  
  .view .mask:nth-child(odd) {
      background-color: rgba(235,167,32, 0.7);
  }
  
  .view .mask:nth-child(even) {
      background-color: rgba(4,141,195, 0.7);
  }
  </code></pre>
  
  <p>What ends up happening, though, is that all of the masks turn one background color (the even color). This can be seen here: <a href="http://noellesnotes.com/portfolio/seventeen/" rel="nofollow">http://noellesnotes.com/portfolio/seventeen/</a></p>
  
  <p>Any direction would be greatly appreciated!</p>