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.
query_posts
, ever, it breaks the main query object on which so may functions and plugins rely. Every page has a custom post class which you can target via its css selector. Please seepost_class