Latest Post Styled Different Than other Posts

Question

I'm just completely mixed-up with this. I need the 1st post of the loop looks differently, as a kind of magazine style, you know: bigger thumbnail and bigger title.

I tried already nth-of-type in CSS, :first-child, and different php variations. But nothing works.

Here is the main part of code on index.php::

<h3 class="latest">The Latest</h3>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post excerpt <?php echo (++$j % 2 == 0) ? 'last' : ''; ?>">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail"></a>

<div class="post-content-inner">
<header>    
<div class="img-container">
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('slider',array('title' => '')); echo '</div>'; ?></a>
<?php } ?>
</div>

<div class="info-container">
<h2 class="title">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>
</h2>
<div class="post-info">
<span class="thetime"><span class="icon-clock" style="margin-right:-4px;"></span>
<?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?> </span>
</div>

</div>
</header><!--.header-->

<div class="post-content image-caption-format-1">
<!--<?php echo excerpt(48);?>-->
</div>

</div>
</div><!--.post excerpt-->

I'll be tremendously appreciate if you could help me with this.

Answer 1

Since you're using the default loop (not a custom one), you can check the counter for the first (0th) loop and alter your output just for that one.

The WordPress support forum had a similar question that offered this bit of code:

if( $wp_query->current_post == 0 && !is_paged() ) { /*first post*/ }

You can put your whole block of HTML inside that if statement with your customization, or use it to just add classes to the elements for styling with CSS. For example, something like this could work:

$first_post = false;
if( $wp_query->current_post == 0 && !is_paged() ) { 
    $first_post = true;
}
// inside The Loop:
<div class="post excerpt <?php if( $first_post ) { echo 'first-post'; } ?>">

That would give you class="post excerpt first-post" on the first one and class="post excerpt " on the others. You can do this in addition to your other custom classes that are in your code.

Answer 2

I would make sure its not a specificity issue try

html body.someclass div.somewrapperClass div.post etc... 

As many levels as you can just to check if its not simply a css issue.