Изменить css для каждой четвертой строки

Question

Я хочу отображать каждую четвертую строку, захваченную из базы данных с помощью другого стиля CSS. Первые три строки из БД должны взять стиль CSS (col-4), но четвертая строка должна взять стиль CSS (последний номер col-4). Как я могу это сделать с PHP. Мой код показан ниже.

<?php foreach($result as $value) : ?> 
    <div class="col-4"> 
     <a href="view.php?m_id=<?php echo $value['m_id']; ?>"> 
      <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px"> 
     </a> 
     <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3> 
     <p><strong><?php echo $value['name']; ?></strong> </p> 
     <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p> 
    </div> 
<?php endforeach; ?> 

Answer 1

Вы можете легко сделать это с помощью переключателя :nth-child CSS:

.col-4:nth-child(4n) { 
    /* styles for every 4th row */ 
} 

Если вы не хотите, чтобы стиль каждых четвёртых строк, но вместо того, чтобы только 4-й ряд, Не используйте n в 4n:

.col-4:nth-child(4) { ... } 

Browser compatibility совсем неплохо; поддерживается все, кроме IE < 9.

Answer 2

Вам вообще не нужно использовать PHP; CSS предоставляет эту функцию самостоятельно.

.col-4 { 
    ..... your standard css for the columns ...... 
} 
.col-4:nth-child(4) { 
    ..... your special css for the 4th column 
} 

В качестве альтернативы, если четвёртый элемент является последним в наборе (как вы намекнули в вопросе), вы можете использовать вместо col-4:last-child { ... }.

Замечание по совместимости с браузером. Если вам необходимо поддерживать IE8 или более ранние версии с этими селекторами, вам нужно будет использовать скрипт полифония CSS, такой как Selectivizr, поскольку старые версии IE его не поддерживают. Selectivizr прекрасно справляется с этой проблемой.

Answer 3

Просто посчитайте, сколько строк вы выводимый и использовать модуль, чтобы проверить, является ли это четвёртая строка:

$index = 0; 
<?php foreach($result as $value) : ?> 
    <div class="col-4<?php if (++$index % 4 == 0): ?> last<?php endif; ?>"> 
     <a href="view.php?m_id=<?php echo $value['m_id']; ?>"> 
      <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px"> 
     </a> 
     <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3> 
     <p><strong><?php echo $value['name']; ?></strong> </p> 
     <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p> 
    </div> 
<?php endforeach; ?> 

Answer 4

<?php foreach($result as $i=>$value) : ?> 
    <div class="col-4<? if ($i%4==3) echo ' last'; ?>"> 

Answer 5

div:nth-child(4n) 

использование п-й ребенок с мультипликатором в CSS

http://css-tricks.com/how-nth-child-works/

Также задал вопрос: Select every Nth element in CSS