I would like to use modulus to apply a CSS class to a grid of images in two different situations:
Situation 1
I would like to apply a CSS class to all middle images indicated by the *. I cannot simply use nth-child as I do not know if there will always be 9 images in the grid. Sometimes there could be 5, sometimes 7, sometimes 8, etc...it's variable.
[Img 1] [Img 2*] [Img 3]
[Img 4] [Img 5*] [Img 6]
[Img 7] [Img 8*] [Img 9]
Situation 2
I would like to apply a CSS class again to the images in the grid indicated by the *. I also can't use nth-child for the same reason as above. I will add CSS properties to the class given in this situation through a media query as the site has less width, hence the two columns of images.
[Img 1] [Img 2*]
[Img 3] [Img 4*]
Code I have so far
if ($counter % 3 == 1) {
$situation1 = TRUE;
}
if ($counter % 3 == 0) {
$situation2 = TRUE;
}
$counter++;
<div <?php if($situation1) { post_class('situation1'); } if($situation2) { post_class('situation2'); }><img src="" /></div>
The modulus is the remainder of the first operand divided by the second operand, so in your case you would need:
And you could rewrite that as:
However, you can do the same in css using the
nth-child
selector (IE9+):Situation 1:
Situation 2: