Question

I have a table with a row of 3 div’s then another row or 3 div’s then another and then another.

But what I’m trying to achieve is to highlight every other row. And each row contains 3 div’s.

So the first row will be .mydiv .even and then the .even‘s will be grey. Then the next row will be .mydiv .odd and then the .odd‘s will be white.

I am using this code from css-tricks.com ($xyz++%2) to make every other div a different class.

All help is apreciated.

---

This is my code

$get_new_games = mysql_query("SELECT game_title,game_description,id from games ORDER BY added_date LIMIT 10");
while ($row = mysql_fetch_array($get_new_games)) {
$new_game_title = $row['game_title'];
$new_game_description = $row['game_description'];
$new_game_id = $row['id'];
$new_games_display .= '<div class = "game_module class-'.($xyz++%2).'"><img src = "game_thumbnails/'.$new_game_id.'/_thumb_100x100.png" class = "game_img"></div>';
}

Answer 1

It would make more sense to add the class to the row, to output the table rows in PHP, use something like this:

<?php for ($i = 0; $rows[$i]; $i ++): ?>
<tr class="<?php echo $i % 2 ? 'odd' : 'even'; ?>">
  <td>
    <div />
  </td>
  <td>
    <div />
  </td>
  <td>
    <div />
  </td>
</tr>
<?php endfor; ?>

The modulo operator % will return the remainder of the division, in this case the division is by two and any equal number will give a remainder of zero, and any unequal number will give a remainder of one.

The selector for the div would then be:

tr.odd td > div
tr.even td > div

this will make sure that only the top div in each row is selected.

UPDATE:

From the code you’ve supplied it doesn’t really appear you’re using a table at all (maybe you meant it in a looser sense than the actual HTML element?). Going by your code you already use the modulo in the way described above, but you need to change the following.

$xyz = 0;
$get_new_games = mysql_query("SELECT game_title,game_description,id from games ORDER BY added_date LIMIT 10");
while ($row = mysql_fetch_array($get_new_games)) {
  $new_game_title = $row['game_title'];
  $new_game_description = $row['game_description'];
  $new_game_id = $row['id'];
  $new_games_display .= '<div class = "game_module class-'.($xyz++%2 ? 'odd' : 'even').'"><img src = "game_thumbnails/'.$new_game_id.'/_thumb_100x100.png" class = "game_img"></div>';
}

I’ve added the first line to initialize the variable to zero and changed the $new_games_display-line to ($xyz++%2 ? 'odd' : 'even'). This will ensure that every other div has the class class-odd and the rest class-even.

The only issue I’m having is that the code you supplied doesn’t really correspond to your initial problem, with rows of three divs, maybe I’m missing something — feel free to supply more code and I’ll be able to help you more.