How do I target every third div with a specific class that is wrapped with an anchor tag?

How can I target every third div and give it a specific style? Before inserting the tag <a>

, my code was working fine, but I don't know why it doesn't work now:

<div class="post-row clearfix">
    <a href="">
        <div class="recent-post post-1">
            <div class="recent-post-info">
                <p>Three Apple Pi Students Win Physics Video Award</p>
            </div><!-- recent-post-info -->
        </div><!-- recent-post -->
    </a>

    <a href="">
        <div class="recent-post post-2">
            <div class="recent-post-info">
                <p>Robot on Mars &mdash; 3 years later</p>
            </div><!-- recent-post-info -->
        </div><!-- recent-post -->
    </a>

    <a href="">
        <div class="recent-post post-3">
            <div class="recent-post-info">
                <p>Second Annual "Spooktacular" cruise in</p>
            </div><!-- recent-post-info -->
        </div><!-- recent-post -->
    </a>

</div><!-- post-row -->

      

        
        
        
      

    

Here's the CSS:

.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;
}