ACF repeater fields - Hvordan style spesifikke rader?

Repeater Field i Advanced Custom Fields (ACF) er et av de kraftigste verktøyene for utviklere. Det lar klienter legge til et ubegrenset antall elementer (f.eks. “Partnere”, “Agenda”, “Ingredienser”) uten å trenge separate innlegg.

Men hvordan styler du dem? Spesielt hvis du vil at annethvert element skal se annerledes ut?

Grunnleggende løkke

<?php if( have_rows('min_repeater') ): ?>
    <ul class="slides">
    <?php while( have_rows('min_repeater') ): the_row(); 
        $image = get_sub_field('bilde');
        $content = get_sub_field('tekst');
        ?>
        <li class="slide">
            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
            <p><?php echo $content; ?></p>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>

Utfordring: “Sebra”-mønsteret

Designere ønsker ofte at hver alternerende rad skal ha en mørk bakgrunn. I PHP bruker vi en tellervariabel ($i) og modulo-operatoren (%).

<?php if( have_rows('seksjoner') ): 
    $i = 0; // Init teller
?>
    <div class="sections-container">
    <?php while( have_rows('seksjoner') ): the_row(); 
        $i++; // Øk teller
        // Sjekk om partall
        $klasse = ($i % 2 == 0) ? 'bg-dark' : 'bg-light';
    ?>
        
        <div class="row <?php echo $klasse; ?>">
            <!-- Innhold -->
        </div>

    <?php endwhile; ?>
    </div>
<?php endif; ?>

CSS n-th child (den moderne måten)

I 2026, hvis endringen kun er visuell, er det bedre å bruke CSS:

.row:nth-child(even) {
    background-color: #333;
    color: #fff;
}

Bruk PHP-løsningen kun når logikken er kompleks (f.eks. ved lasting av helt forskjellige HTML-strukturer).