nth-child with a PHP array - php

Question

I'm using ACF to post WP posts on a page. But I to be able to control certain CSS properties using nth:child selectors. Heres the PHP which displays every thing fine. Problem is (I'm assuming) that the "foreach" item is making the nth:child not work, because the are not siblings?
<div class="row">
<?php
$posts = get_field('projects');
if ( $posts ) {
foreach ( $posts as $post ): ?>
<div class="col-xl-6 no-space">
<?php
setup_postdata($post); ?>
<div class="project__wrap">
<div class="project__project"><?php echo get_the_post_thumbnail(); ?></div>
<div class="project__description__list col-xl-6"><div class="project-content"><h2><?php echo get_the_title() ; ?></h2><p><?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 15 ) ); ?></p></div>
<div class="heart"><?php
$image = get_field('heart_icon');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</div> <!-- .project__description__list -->
</div> <!-- .project__wrap -->
<?php wp_reset_postdata(); ?>
</div>
<?php endforeach;
}
?>
div.project-content:nth-child(odd) {
top:0;
left:0;
}
div.project-content:nth-child(even) {
bottom:0;
right:0;
}

Answer 1

The problem in your case is, project-content is always the first child of it's container (project__description__list). What you want is this for .col-xl-6.no-space. But this would be very ambiguous, so I would suggest, to add another class to this div - i.e. project-row-item.
<div class="col-xl-6 no-space project-row-item">
doing so, you could change your css like this
.project-row-item:nth-child(odd) div.project-content {
top:0;
left:0;
}
.project-row-item:nth-child(even) div.project-content {
bottom:0;
right:0;
}

Answer 2

<?php $posts = get_field('projects');
if ( $posts ) {
$i=0; $k; $class='';
foreach ( $posts as $post ):
$k= $i%2;
if($k==0){ $class='even'; } else { $class='odd'; }?>
<div class="col-xl-6 no-space">
<?php setup_postdata($post); ?>
<div class="project__wrap">
<div class="project__project"><?php echo get_the_post_thumbnail(); ?></div>
<div class="project__description__list col-xl-6"><div class="project-content <?php echo $class; ?>"><h2><?php echo get_the_title() ; ?></h2><p><?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 15 ) ); ?></p></div>
<div class="heart"><?php $image = get_field('heart_icon');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</div> <!-- .project__description__list -->
</div> <!-- .project__wrap -->
<?php wp_reset_postdata(); ?>
</div>
<?php $i++; endforeach; } ?>
Now you could change your style as :
div.project-content.odd {
top:0;
left:0;
}
div.project-content.even {
bottom:0;
right:0;
}