Я хотел бы использовать модуль для применения класса CSS к сетке изображений в двух разных ситуациях:
Ситуация 1
Я хотел бы применить класс CSS ко всем средним изображениям, обозначенным символом *. Я не могу просто использовать nth-child, поскольку не знаю, будет ли в сетке 9 изображений. Иногда может быть 5, иногда 7, иногда 8 и т. Д. … это переменная.
[Img 1] [Img 2*] [Img 3] [Img 4] [Img 5*] [Img 6] [Img 7] [Img 8*] [Img 9] Ситуация 2
Я хотел бы снова применить класс CSS к изображениям в сетке, обозначенной символом *. Я также не могу использовать nth-child по той же причине, что и выше. Я добавлю свойства CSS к классу, указанному в этой ситуации, через медиа-запрос, поскольку сайт имеет меньшую ширину, следовательно, два столбца изображений.
[Img 1] [Img 2*] [Img 3] [Img 4*]
Код, который я до сих пор
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>
Модуль – это остальная часть первого операнда, деленная на второй операнд, поэтому в вашем случае вам понадобится:
if ($counter % 3 === 2) { $situation1 = TRUE; } if ($counter % 2 === 0) { $situation2 = TRUE; }
И вы можете переписать это как:
$situation1 = ($counter % 3 === 2); $situation2 = ($counter % 2 === 0);
Однако вы можете сделать то же самое в css, используя селектор nth-child (IE9 +):
Ситуация 1:
:nth-child(3n+2)
Ситуация 2:
:nth-child(2n+2)