Author: sanraul

Assign a CSS class to the first item in a loop

Posted on by sanraul

It is possible that you might face a situation where you are using a {foreach...} loop to render a list of items, but you may want to assign a CSS class to the first item in the loop. An easy way to accomplish this is by looking at the property @first of the current iteration item.

1
2
3
4
5
6
7
8

{pages child_of="houses" assign_to="houses_pages"}
 
{foreach $houses_pages.data as $house}
<div class="{if $house@first == 1}active{/if}">
    <h4>{$house.post_title}</h4>
    {$house.post_content_filtered}
</div>
{/foreach}
{pages child_of="houses" assign_to="houses_pages"}

{foreach $houses_pages.data as $house}
<div class="{if $house@first == 1}active{/if}">
    <h4>{$house.post_title}</h4>
    {$house.post_content_filtered}
</div>
{/foreach}