how to add a css class to latest post?

How are the posts ordered? Newest first?
If so, you can just use CSS to style the first post https://www.w3schools.com/cssref/sel_firstchild.asp

When you wrap each post with a div, you specify a class like this:

<div class="new">

Then the CSS would be:

.new {
some-styling: here;
}

This has been answered so many times. See https://www.ads-software.com/search/style+first+post?forums=1 for a whole range of solutions.

Andrew, that would work except that I have a couple categories. So if I go into category 1 the newest item will have that class even if the newest item is in category 2, for instance.

esmi, the above stated reason is why I haven’t been able to find a solution by searching for what you specified.

Pretty much all of the solutions listed in that search results page will work.

To better explain.
If I use the solutions in many of the search results I will get the following:

Main Blog Page
Latest Post (New)
2nd Latest Post
3rd Latest Post
4th Latest Post
5th Latest Post
So on…

Category 1 Page
Latest Post (New)
3rd Latest Post
So on…

Category 2 Page
2nd Latest Post (New)
4th Latest Post
5th Latest Post

Category 2 Page is where the issue arrives. I don’t want that 2nd latest post to be styled with the new class. but since that 2nd latest post is the first post in the Category 2 page it will be styled new. Maybe I’m missunderstanding something?
Thanks

Your posts should have a class different to a category. View source your webpage and find this out.

The only way to achieve this would be to run a quick secondary query to determine the id of the most recent post and compare this to the id of the first post on the page as part of a conditional to decide whether to add the new class or not.

esmi, it sounds like we could be on the right track.

The only problem is my knowledge of php is quite limited. Do you care to explain how I would do that?

I am using the following code btw.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="NEW CLASS GOES HERE">
  <?php if( get_post_meta($post->ID, "image_link", true) ): ?>
  <a href="<?php the_field('image_link'); ?>" target="_blank">
  <?php endif; ?>
  <?php if( get_post_meta($post->ID, "image", true) ): ?>
  <img src="<?php the_field('image'); ?>" border="0" style="float: left;"/>
  <?php endif; ?>
  <?php if( get_post_meta($post->ID, "image_link", true) ): ?>
  </a>
  <?php endif; ?>
  <div style="width: <?php the_field('text_box_width'); ?>px;">
    <h2>
      <?php the_title(); ?>
    </h2>
    <span class="date">
    <?php the_time( 'M j y' ); ?>
    | </span><span class="author">
    <?php the_author(); ?>
    </span>
    <?php the_content(); ?>
  </div>
</div>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<?php endif; ?>

Something like:

<?php
$args = array(
	'posts_per_page' => 1
);
$latest = get_posts( $args );
$latest_id = $latest[0]->ID;
wp_reset_query();
wp_reset_postdata();?>

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if( $latest_id == $post->ID) :?>
<div class="NEW CLASS GOES HERE">
<?php endif;?>

[ rest of Loop ]

<?php // Last closing div
if( $latest_id == $post->ID) :?>
</div>
<?php endif;?>

should work.

thanks a lot, esmi. I appreciate your help.

That does exactly what I wanted to do.