Grow your CSS skills. Land your dream job.

Last updated on:

Applying Even/Odd Classes

<div class="example-class<?php echo ($xyz++%2); ?>">

Used inside a loop, class names would be named .example-class0 and .example-class1 alternating. Increasing the "2" number allows you to increment in thirds or fourths or whatever you need:

class="class<?php echo ($xyz++%3); ?>"

Classes: class0 class1 class2 class0 class1 class2

Change number to 4, this is the result: class0 class1 class2 class3 class0 class1 class2 class3


  1. Laurie
    Permalink to comment#

    FYI, the 2nd example should read:


  2. Laurie
    Permalink to comment#


  3. Permalink to comment#

    Easiest method I have ever seen, thank you!

  4. Permalink to comment#

    That was easy!


  5. Weldo
    Permalink to comment#

    Wow. That rocks! Thank you so much!

  6. ayesha

    thanku :) heaps :)

  7. It´s very Good

  8. Permalink to comment#

    The easiest one so far. So we do not have to use the old

    $count = 1;
    if($count % 2 == 0) {
    }  else {

    one…. Saves time :)

  9. what about this technique, i think its much faster then taking decision on if statement.

    $class = ($class==’class1′) ? “class2″ : “class1″ ;

  10. for($i=1; $i<=10; $i++){

    if($i%2){ echo "class"; } else { echo "class"}


    Simple example can be use in any loop even in wordpress.

  11. Jorge Santillan
    Permalink to comment#

    And… if you php.ini has enabled the directive “short open tag” then the snippet becomes shortest ever!! hehe

    <div class="example-class<?=($xyz++%2)?>">
  12. Dibiler
    Permalink to comment#

    I would say that the easiest way to use two different classes (or more) without using the if-statement is:
    $class=array('odd','even'); ?>
    <div class="<?=$class[$xyz++%2] ?>

  13. Ed
    Permalink to comment#

    $loopNumber= 4;
    $i =1;
    $x = array(‘Sed’, ‘ut’, ‘perspiciatis’, ‘unde omnis’, ‘iste’, ‘natus’, ‘error’, ‘sit’, ‘voluptatem’, ‘accusantium’, ‘doloremque’, ‘laudantium’);
    foreach($x AS $k => $v)
    echo ”


    $i = ($i < $loopNumber) ? ++$i : 1;

    <div class='class0'>Sed</div>
    <div class='class1'>ut</div>
    <div class='class2'>perspiciatis</div>
    <div class='class3'>unde omnis</div>
    <div class='class4'>iste</div>
    <div class='class0'>natus</div>
    <div class='class1'>error</div>
    <div class='class2'>sit</div>
    <div class='class3'>voluptatem</div>
    <div class='class4'>accusantium</div>
    <div class='class0'>doloremque</div>
    <div class='class1'>laudantium</div>
    • Ed
      Permalink to comment#

      That’s what the top part should have read….

          $loopNumber = 4;
          $i =0;
          $x = array('Sed', 'ut', 'perspiciatis', 'unde omnis', 'iste', 'natus', 'error', 'sit', 'voluptatem', 'accusantium', 'doloremque', 'laudantium');
          foreach($x AS $k => $v)
            echo "<div class='class".$i."'>".$v."</div>";
            $i = ($i < $loopNumber) ? ++$i : 0;
  14. Thanks. This example it´s very good for designs with css and wordpress

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".