WordPress.org

Support

Support » How-To and Troubleshooting » Add CSS code to list item for every 3rd loop in WP

Add CSS code to list item for every 3rd loop in WP

  • Hi,

    I have this code:

    if( have_posts() ) :
    while ($wp_query->have_posts()) : $wp_query->the_post();
    ?>
    <li>Test</li>
    <?php endwhile; ?>
    <?php endif;

    Now after every 3rd loop, I’d like to add style="background:red" to my list item.

    How do I do this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator cubecolour

    @numeeja

    You can do this most easily with css – if the people viewing your site are likely to be using decent browsers

    li:nth-child(3n+0) {background: #900;}

    Brilliant.

    Thank you.

    I also got this PHP solution:

    if( have_posts() ) :
    $i=0;
    while ($wp_query->have_posts()) : $wp_query->the_post();
    $i++;
    ?>
    <li <?php if(($i % 3)==0)echo 'style="background:red"';?>>Test</li>
    <?php endwhile; ?>
    <?php endif;
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add CSS code to list item for every 3rd loop in WP’ is closed to new replies.
Skip to toolbar