Title: Alternating css classes in loop
Last modified: August 19, 2016

---

# Alternating css classes in loop

 *  [aedeeley](https://wordpress.org/support/users/aedeeley/)
 * (@aedeeley)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/alternating-css-classes-in-loop/)
 * Here’s what I’m trying to accomplish:
 * I have a 1 column layout where I have posts being published in 3 horizontal columns.
   The issue is, is that I need the first two posts to have a 30px margin-right 
   and the third to have none. I have created a class with the 30px margin-right,
   I just need to have the loop modified so it adds the class to the first two and
   not the third. Also, I need it to loop, there are going to be many posts on a
   page. Here is what the code looks like thus far:
 *     ```
       <ul id="post">
       		<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
       		<li class="end"> //this is the 30px margin-right
       		<a href="<?php the_title(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
       		<span class="ss"><?php the_content(); ?></span></a>
       		<div class="post">
       			<span class="heart"><?php if(function_exists('the_ratings')) { the_ratings(); } ?>
       			</span><span class="comment">
       			<img alt="Comments" src="<?php bloginfo('template_directory'); ?>/images/comment.png" /><em><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></em></span>
       		</div>
       		</li>
       		<?php endwhile; ?><?php else : ?>
       		<h2 class="center">Not Found</h2>
       		<p class="center">Sorry, but you are looking for something that isn't here.</p>
       	</ul>
       ```
   
 * I’ve accomplished this before with the help of friend who was better than I at
   PHP, but I can’t get in touch with him. Thanks!

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

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/alternating-css-classes-in-loop/#post-1183910)
 * Try:
 *     ```
       <ul id="post">
       	<?php $c = 0; if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
       	<?php $c++;
       	if( ($c % 3) == 1 || ($c % 3) == 2 ) $myclass = ' class="end"';
       	else $myclass = '';
       	?>
       	<li<?php echo $myclass;?>>
       	<a href="<?php the_title(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
       	<span class="ss"><?php the_content(); ?></span></a>
       	<div class="post">
       		<span class="heart"><?php if(function_exists('the_ratings')) { the_ratings(); } ?>
       		</span><span class="comment">
       		<img alt="Comments" src="<?php bloginfo('template_directory'); ?>/images/comment.png" /><em><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></em></span>
       	</div>
       	</li>
       	<?php endwhile; ?><?php else : ?>
       	<h2 class="center">Not Found</h2>
       	<p class="center">Sorry, but you are looking for something that isn't here.</p>
       </ul>
       ```
   
 *  Thread Starter [aedeeley](https://wordpress.org/support/users/aedeeley/)
 * (@aedeeley)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/alternating-css-classes-in-loop/#post-1183992)
 * thank u so much, worked like a charm!
 *  [gambuto](https://wordpress.org/support/users/gambuto/)
 * (@gambuto)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/alternating-css-classes-in-loop/#post-1184208)
 * if I read this code correctly it just counts the post in the loop and when you
   reacht the 3 one an if else statement occurs.
 * Thing is I have the same problem as the OP, but within my loop I have a statement
   that excludes a category this way it shows 3 posts while the loop actually is
   5, so trying to target the third post and change its css can be done but it might
   not show for it is excluded.
 * Any sollutions for this?

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

The topic ‘Alternating css classes in loop’ is closed to new replies.

## Tags

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

 * 3 replies
 * 3 participants
 * Last reply from: [gambuto](https://wordpress.org/support/users/gambuto/)
 * Last activity: [16 years, 1 month ago](https://wordpress.org/support/topic/alternating-css-classes-in-loop/#post-1184208)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics