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

Comments

  1. User Avatar
    Laurie
    Permalink to comment#

    FYI, the 2nd example should read:

    class="class"

  2. User Avatar
    Laurie
    Permalink to comment#

    doh:
    class="class\"

  3. User Avatar
    Martin
    Permalink to comment#

    Easiest method I have ever seen, thank you!

  4. User Avatar
    Dian
    Permalink to comment#

    That was easy!

    Thanks~!

  5. User Avatar
    Weldo
    Permalink to comment#

    Wow. That rocks! Thank you so much!

  6. User Avatar
    ayesha

    thanku :) heaps :)

  7. User Avatar
    Rubén

    It´s very Good

  8. User Avatar
    Aneek
    Permalink to comment#

    Awesome,
    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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      Mohamed
      Permalink to comment#

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

  11. User Avatar
    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. User Avatar
    Dibiler
    Permalink to comment#

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

  13. User Avatar
    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 ”

    “.$v.”

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

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

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

  15. User Avatar
    Omar

    All of mine say ‘0’…. ?

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag