How do I switch css class on post

Question

On this dev site, I have a post that displays three items (under Coming Soon) and I would like to modify the class on the 'learn more' link at the end to display three different options, one for each entry.

p class="lm-red" p class="lm-green" p class="lm-blue"

The code is like this:

<?php
$args = array( 'post_type' => 'post', 'posts_per_page' => 3, 'cat' => 2, 'sort_by' => 'event_begin_date', 'order' => 'ASC');
query_posts( $args );
while (have_posts()) : the_post(); ?>

<div class="cs col-sm-6 col-md-4 col-lg-4">
<article class="project-item">
<a href="#">
    <figure class="fig">
        <img class="img-responsive" alt="" src="<?php the_field('event_image'); ?>">
      </figure>
    <div class="content">
        <h3><?php the_title(); ?></h3>
        <p class="dates hidden-xs"><?php the_field('event_dates'); ?></p>
        <p class="hidden-xs"><?php the_field('event_snippet'); ?></p>
    <p class="lm">Learn More</p>
  </div>    
  </a>
</article>
</div>
<?php endwhile;?>

I have tried targeting the items in css using nth-child, but attempting to do so has resulted in all items being styled the same regardless.

p.lm { 
    font: 16px "Open Sans", sans-serif; 
    text-align: center;
    text-transform: uppercase;
    background-color: #AC162C;
    position: absolute;
    width: 280px;
    bottom: 0;
    left: 20px;
    color: #fff;
}

p.lm:nth-child(2n) { 
    background-color: #b9b329;  
}

p.lm:nth-child(3n) { 
    background-color: #1270f8;
}

I would appreciate some insights for resolving this, either through WP or CSS.

Answer 1

First of all, never use query_posts, use WP_Query to create additional queries.

You can target specific post positions in the loop by using the built in current_post var of the query object.

Here's an example using the post_class function:

<?php
$my_posts = new WP_Query( array( 'posts_per_page' => 3 ) );
if( $my_posts->have_posts() ):
    while( $my_posts->have_posts() ):
        $my_posts->the_post();
        ?>
        <div <?php post_class( 'index-' . ( $my_posts->current_post + 1 ) ); ?>>
            <p class="lm">Learn More</p>
        </div>
        <?php
    endwhile;
    wp_reset_postdata();
endif;
?>

Then in your CSS:

.index-1 .lm { /* styles for 1st post */ }
.index-2 .lm { /* styles for 2nd post */ }
.index-3 .lm { /* styles for 3rd post */ }