title: How do I target the every third div with a certain class that is wrapped with an anchor tag?
body: <p>How can I target every 3rd div and give it a certain style? Before I inserted the <code>&lt;a&gt;</code> tag, my code worked fine, but I don't know why it isn't working now:</p>
  
  <pre><code>&lt;div class="post-row clearfix"&gt;
      &lt;a href=""&gt;
          &lt;div class="recent-post post-1"&gt;
              &lt;div class="recent-post-info"&gt;
                  &lt;p&gt;Three Apple Pi Students Win Physics Video Award&lt;/p&gt;
              &lt;/div&gt;&lt;!-- recent-post-info --&gt;
          &lt;/div&gt;&lt;!-- recent-post --&gt;
      &lt;/a&gt;
  
      &lt;a href=""&gt;
          &lt;div class="recent-post post-2"&gt;
              &lt;div class="recent-post-info"&gt;
                  &lt;p&gt;Robot on Mars &amp;mdash; 3 years later&lt;/p&gt;
              &lt;/div&gt;&lt;!-- recent-post-info --&gt;
          &lt;/div&gt;&lt;!-- recent-post --&gt;
      &lt;/a&gt;
  
      &lt;a href=""&gt;
          &lt;div class="recent-post post-3"&gt;
              &lt;div class="recent-post-info"&gt;
                  &lt;p&gt;Second Annual "Spooktacular" cruise in&lt;/p&gt;
              &lt;/div&gt;&lt;!-- recent-post-info --&gt;
          &lt;/div&gt;&lt;!-- recent-post --&gt;
      &lt;/a&gt;
  
  &lt;/div&gt;&lt;!-- post-row --&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.post-row{
      padding: 0 15%;
  }
  
  .recent-post{
      width: 31.33333333%;
      height: 200px;
      float: left;
      margin: 0 3% 40px 0;
      border-radius: 10px;
      display: table;
  }
  
  .recent-post-info{
      border-radius: 10px;
      display: table-cell;
      vertical-align: middle;
      background: rgba(109, 109, 109, .85);
  }     
  
  .recent-post:nth-child(3n){
      margin-right: 0;
  }
  </code></pre>