php give class to 3 div's then skip 3 - php

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.

Answer 2

While looping through and printing out the rows, you will use the index to determine even or odd.
if(!$index%2){
echo "even";
}
else{
echo "odd";
}
The % is the modulus operator, which returns the remainder when its operands are divided.
Edit:
So in your case, your last line would be
$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>';

Answer 3

try some thing like this:
$i = 0;
while ($row = mysql_fetch_array($get_new_games))
{
...
$i++;
$class = ($i%2)? "even" : "odd";
$new_games_display .= '<div class = "game_module class-' . $class .'"><img src = "game_thumbnails/'.$new_game_id.'/_thumb_100x100.png" class = "game_img"></div>';
}
instead of check $i%2 ==0 or not you can use something like
$class = ($i & 1) ? "odd" : "even";
or
if($i & 1){
$class = "odd";
}else{
$class = "even";
}

Answer 4

Your code is only highlighting every other row instead of groups of three rows. You could use an :nth-child css selector, but using php will ensure browser compatibility since the class is hard coded. Anyway..
$evenodd = false; // false indicates odd
$count = 0;
while (...) {
... //display
$count++;
if ($count == 2) {
$evenodd = !$evenodd;
$count = 0;
}
}