Treehouse: 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

Comments

  1. Laurie
    Permalink to comment#

    FYI, the 2nd example should read:

    class="class"

  2. Laurie
    Permalink to comment#

    doh:
    class="class\"

  3. Permalink to comment#

    Easiest method I have ever seen, thank you!

  4. Permalink to comment#

    That was easy!

    Thanks~!

  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#

    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. 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:
    <?
    $xyz=0;
    $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 ”

    “.$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>
    
    • 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

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 in triple backtick fences like this:

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