nth-child with a PHP array

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"><a href="<?php echo get_permalink(); ?>"><h2><?php echo get_the_title() ; ?></h2><p><?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 15 ) ); ?></p></a></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 - ie 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; ?>"><a href="<?php echo get_permalink(); ?>"><h2><?php echo get_the_title() ; ?></h2><p><?php echo apply_filters( 'the_content', wp_trim_words( strip_tags( $post->post_content ), 15 ) ); ?></p></a></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;
}