Title: Using Offset in the Loop??
Last modified: August 21, 2016

---

# Using Offset in the Loop??

 *  [Sarah_Frantz](https://wordpress.org/support/users/sarah_frantz/)
 * (@sarah_frantz)
 * [13 years ago](https://wordpress.org/support/topic/using-offset-in-the-loop/)
 * I want to style my recent posts individually, sort of.
 * What I want to do is have 7 posts total.
 * The 1st post styled differently from all other posts
    The 2nd post styled differently
   from all other posts The 3rd and 4th posts styled the same (but different from
   1 and 2) The 5th, 6th, and 7th posts styled the same (but different from 1, 2,
   3 and 4).
 * How would I do this? With an offset? Or with a counter? Help would be great!
 * I thought of just doing this strictly with CSS, but some posts have images, and
   some don’t some will only show a title, and some no picture and a title /excerpt,
   so doing it via CSS isn’t really a solid solution.

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [13 years ago](https://wordpress.org/support/topic/using-offset-in-the-loop/#post-3795910)
 * I would use the build-in loop counter variable ‘current_post’ which starts with
   0 for the first post in the loop;
 * example for a ‘default’ query:
 *     ```
       <?php while( have_posts() ) : the_post();
       if( $wp_query->current_post == 0 ) {
       //output for 1st post//
       } elseif( $wp_query->current_post == 1 ) {
       //output for 2nd post//
       } .......ETC....
       ```
   
 * example for custom query:
 *     ```
       <?php $args = array( .whatever. );
       $recent = new WP_Query( $args );
       while( $recent->have_posts() ) : $recent->the_post();
       if( $recent->current_post == 0 ) {
       //output for 1st post//
       } elseif( $recent->current_post == 1 ) {
       //output for 2nd post//
       } .......ETC....
       ```
   
 * [http://codex.wordpress.org/Class_Reference/WP_Query](http://codex.wordpress.org/Class_Reference/WP_Query)
 *  [aritzalvarez](https://wordpress.org/support/users/aritzalvarez/)
 * (@aritzalvarez)
 * [13 years ago](https://wordpress.org/support/topic/using-offset-in-the-loop/#post-3795924)
 * A solution maybe… Is use a simple counter in the PHP code and asign different
   classes using echoes in class and stuf,.. there are a lot of ways to do it…
 * But a pure CSS aproach is use the pseudoclass _:nth-child_
 * I do’nt know how toy main loop structure is, but usually is a wrapper div containing
   another div for every single post.Giving an output like this (or pretty similar)
 *     ```
       <div class="wrap">
   
           <div class="single_post_div">
               Here goes your post content 1
           </div>
   
           <div class="single_post_div">
               Here goes your post content 2
           </div>    
   
           <div class="single_post_div">
               Here goes your post content 3
           </div>
   
           <div class="single_post_div">
               Here goes your post content 4
           </div>
   
           <div class="single_post_div">
               Here goes your post content 5
           </div>    
   
           <div class="single_post_div">
               Here goes your post content 6
           </div>    
   
           <div class="single_post_div">
               Here goes your post content 7
           </div>    
   
       </div>
       ```
   
 * As you see all post hace the same class, no need a single class for everyone 
   or single id (you don’t want select bi ID, you want select by position in loop)
   there is when you could use :nth-child pseudoclass
 *     ```
       .wrap .single_post_div { width:100%; padding:20px 0; }
   
       .wrap .single_post_div:nth-child(1) { background:#9FC; }
       .wrap .single_post_div:nth-child(2) { background:#69F; }
   
       .wrap .single_post_div:nth-child(3),
       .wrap .single_post_div:nth-child(4) { background:#999; }
   
       .wrap .single_post_div:nth-child(5),
       .wrap .single_post_div:nth-child(6),
       .wrap .single_post_div:nth-child(7) { background:#aa0; }
       ```
   
 * This will apply style to the (x) child from parent div (.wrap in the example)
 * You can see it working in a lil [jsfiddle](http://jsfiddle.net/aritz81/CNRUE/1/)
   i did.
 * I like this solution cause yo don’t need mess on PHP or querys…
 * I hope it be usefull toy you 🙂
 *  Thread Starter [Sarah_Frantz](https://wordpress.org/support/users/sarah_frantz/)
 * (@sarah_frantz)
 * [13 years ago](https://wordpress.org/support/topic/using-offset-in-the-loop/#post-3795926)
 * Thats what I ended up doing, a css approach. Only problem is it seems like handing
   off something like that to the next developer whoever handles the site might 
   be confused by it all.
 *  [aritzalvarez](https://wordpress.org/support/users/aritzalvarez/)
 * (@aritzalvarez)
 * [13 years ago](https://wordpress.org/support/topic/using-offset-in-the-loop/#post-3795928)
 * use comments… a lot of comments xDDD

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Using Offset in the Loop??’ is closed to new replies.

## Tags

 * [offset](https://wordpress.org/support/topic-tag/offset/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 3 participants
 * Last reply from: [aritzalvarez](https://wordpress.org/support/users/aritzalvarez/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/using-offset-in-the-loop/#post-3795928)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics