nth-child in a WordPress loop? - html

Question

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:
<div class="view">
<?php echo get_the_post_thumbnail( $post->ID, 'clip-thumb' ); ?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p>Your Text</p>
Read More
</div>
</div>
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:
.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);
}
What ends up happening, though, is that all of the masks turn one background color (the even color). This can be seen here: http://noellesnotes.com/portfolio/seventeen/
Any direction would be greatly appreciated!

Answer 1

Each of your .mask elements are even, in the scope of their parent (.view):
<!-- First Child (odd) -->
<div class="view">
<!-- First Child (odd) -->
<?php echo get_the_post_thumbnail( $post->ID, 'clip-thumb' ); ?>
<!-- Second Child (even) -->
<div class="mask">
<h2><?php the_title(); ?></h2>
<p>Your Text</p>
Read More
</div>
</div>
<!-- Second Child (even) -->
<div class="view">
<!-- First Child (odd) -->
<?php echo get_the_post_thumbnail( $post->ID, 'clip-thumb' ); ?>
<!-- Second Child (even) -->
<div class="mask">
<h2><?php the_title(); ?></h2>
<p>Your Text</p>
Read More
</div>
</div>
To achieve what you're after, change the following:
.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);
}
To:
.view:nth-child(odd) .mask {
background-color: rgba(235,167,32, 0.7);
}
.view:nth-child(even) .mask {
background-color: rgba(4,141,195, 0.7);
}