Apply same CSS styles to divs in the arithmetic sequence of three

Question

I have 10 items in my database table. I want to apply same CSS style to the divs in the arithmetic sequence of 3 items.

For example, items [0, 3,6,9] will have CSS style slideInDown, items [1,4,7] will have CSS style slideFloat and items [2,5,8] will have style slideInUp. @if ($i % 3 == 0), I think this will satisfy the series [0, 3,6,9] but how to write logic for other two series.

My code::

@for ($item = 0; $item < count($posts); $item++)
    @if ($i % 3 == 0)    <!-- for items [0,3,6,9]  -->                
        <div class="content">
            <div class="slideInDown text-center">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @elseif($i == 2) <!-- what will be logic for items [2,5,8]  --> 
        <div class="content">
            <div class="slideInUp">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @else  <!-- for items [1,4,7]  --> 
        <div class="content">
            <div class="slideFloat">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @endif
@endfor

IGP · Accepted Answer · 2025-07-12 17:31:42Z

5

You can use the @class directive for that kind of logic, and the $loop variable to keep track of the iterations

@foreach ($posts as $post)
    <div class="content">
        <div @class([
            'slideInDown' => $loop->index % 3 === 0,
            'slideFloat'  => $loop->index % 3 === 1,
            'slideinUp'   => $loop->index % 3 === 2,
        ])>
            <p>{{ $post['post_content'] }}</p>
        </div>
    </div>
@endforeach

Alternatively, add a css rules with :nth-child that target the specific divs you're looking to change.

answered Jul 12 at 17:31

IGP

16.4k5 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IT goldman · Accepted Answer · 2025-07-12 19:14:16Z

Actually you could do so directly in CSS using the selector :nth-child(Xn + Y). But since you want to apply a different class for each item, supposedly, the proper way is to ask if ($i % 3 == modulo) where modulo is 0, 1 and 2.

@for ($item = 0; $item < count($posts); $item++)
    @if ($i % 3 == 0)    <!-- for items [0,3,6,9]  -->                
        <div class="content">
            <div class="slideInDown text-center">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @elseif($i % 3 == 2) <!-- what will be logic for items [2,5,8]  --> 
        <div class="content">
            <div class="slideInUp">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @else  <!-- for items [1,4,7]  or $i % 3 == 1 --> 
        <div class="content">
            <div class="slideFloat">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @endif
@endfor

Consider using CSS if this is only for visual purposes.

body {
  display: flex;
}

.item {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid gray;
}

.item:nth-child(3n+0) {
  animation: bounce 1s;
}

.item:nth-child(3n+1) {
  animation: fadeIn 1s;
}

.item:nth-child(3n+2) {
  animation: zoomIn 1s;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />


<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Collectives™ on Stack Overflow

Apply same CSS styles to divs in the arithmetic sequence of three

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related