Adding a class to portfolio items to style every third item - php

Question

I have a portfolio listing page that loops though the posts like this:
<div class="row">
<!-- Loop though projects -->
<?php
$args = array('post_type' => 'project');
$the_query = new WP_Query( $args );
?>
<?php
if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="col-sm-6 project-entry">
<!--Add thumbnails to potfolio items and resize for responsive-->
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true);
?>
<!--Link images and titles to individual portfolio page -->
<p>
<img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> project image">
</p>
<div class="project-text">
<h4>
<?php the_title(); ?> | <?php the_field('project_type_name_'); ?>
</h4>
<p><?php the_field('brief_description_'); ?></p>
</div>
</div>
</a>
I need to style EVERY first, second and third post. I presume the best way to do this is to add a class to each portfolio item.
So add need to add:
class-one to the first, fourth and so on.
class-two to the second, fifth and so on.
class-three to the third, sixth and so on.
Is this the best way and how do I do this?
Thank you.
EDIT: Let me explain a little more. I have a portfolio listing page, that links to single post pages.
Each listing is an image (project-entry), when you scroll over the image, text appears (project-text) on top of a background image, (on top of the original image). I want the hover image to be the same for every 1st, 4th, 7th item, a different one for every 2nd, 5th and 8th item, and another different one for every 3rd, 6th and 9th item etc etc.
Here is the CSS in use, (so I'm trying to change this part:
background: url('img/project-dark-grey.png');
.project-entry img {
width: 100%;
margin: 30px 0;
position: relative;
}
.project-text {
position: absolute;
z-index: 1;
top: 7%;
color: #fff;
margin-right: 13px;
padding: 24% 0;
background: url('img/project-dark-grey.png');
height: 381px;
visibility: hidden;
}
.project-entry:hover .project-text {
visibility: visible;
}

Answer 1

I need to style EVERY first, second and third post.
You can use nth-child
ul li:nth-child(3n+1) {
color: green;
}
ul li:nth-child(3n+2) {
color: blue;
}
ul li:nth-child(3n+0) {
color: red;
}
<ul>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
<li>Item
</li>
</ul>

Answer 2

Just use nth-child selector.
p:nth-child(3n) {
background: #ff0000;
}
p:nth-child(3n+1) {
background: #ff0000;
}
p:nth-child(3n+2) {
background: #ff0000;
}

Answer 3

You can also use nth-of-type
li:nth-of-type(3n+0){
/* CSS Here */
}
li:nth-of-type(3n+1){
/* CSS Here */
}
li:nth-of-type(3n+2){
/* CSS Here */
}

Answer 4

Try this take a class with classes name set to indexes 0 1 2 as
$classes_arr = array('class-one','class-two','class-three');
Increment the counter $counter and $arr_key inside the Loop
$counter = 0;
$arr_key = 0;
So the over all code should be
$classes_arr = array('class-one','class-two','class-three');
$counter = 0;
$arr_key = 0;
if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
$counter++;
echo '<div class="col-sm-6 project-entry '.$classes_arr[$arr_key].' ">';
$arr_key++;
if($counter%3 == 0){
$arr_key = 0
}
endwhile;
endif;

Answer 5

So it was kind of nth-child, but I needed to use .row. Thank you to everyone who responded, I really appreciate it.
Here's what worked in the end:
.project-text {
/* common styles for all */
background: url('path/to/bg1.png');
}
/* selects .project-text within links 2, 5, 8,... */
/* Switch to background-image here in case you need to add more background properties to the earlier rule */
/* If you use the shorthand again here to only change the background image then you will lose any other previously set properties */
.row a:nth-child(3n + 2) .project-text {
background-image: url('path/to/bg2.png');
}
/* selects .project-text within links 3, 6, 9,... */
.row a:nth-child(3n + 3) .project-text { /* same as 3n */
background-image: url('path/to/bg3.png');
}