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. Martin
    Permalink to comment#

    Easiest method I have ever seen, thank you!

  4. Dian
    Permalink to comment#

    That was easy!


  5. Weldo
    Permalink to comment#

    Wow. That rocks! Thank you so much!

  6. ayesha

    thanku :) heaps :)

  7. Rubén

    It´s very Good

  8. Aneek
    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. Qazi Hamayun
    Permalink to comment#

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

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

  10. Jessica Michael
    Permalink to comment#

    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.

    • Mohamed
      Permalink to comment#

      Thanks a lot Jessica this is exactly what i was looking for.

  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. Diez Varela
    Permalink to comment#

    Thanks. This example it´s very good for designs with css and wordpress

  15. Omar

    All of mine say ‘0’…. ?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.