CODEWITHSUNDEEP
phpwordpress
php_dev
php_dev

Reputation: 113

How to repeat class after 3rd div?

I need to add different class on first 3 divs. and then repeat the class again. For example, first div class on 4th div and 2 div class on 5th div and so on. 

foreach($val as $myval)
{
?>
    <div><?php $myval['name'] ?></div>
<?php   
}

This is my html.

<div class="container first-div">
    <div class="main_head col-lg-6">
    <h3>Here Are Just A Testing Content</h3>
    <div class="take-right"> How to improve your skills. </div>
    </div>
</div>
<div class="container second-div">
    <div class="main_head col-sm-12">
    <h3>Here Are Just A Testing Content</h3>
    <h4> How to improve your skills. </h4>
    </div>
</div>
<div class="container third-div">
    <div class="main_head col-lg-5">
    <span>Here Are Just A Testing Content</span>
    <h4> How to improve your skills. </h4>
    </div>
</div>
<div class="container first-div">
    <div class="main_head col-lg-6">
    <h3>Here Are Just A Testing Content</h3>
    <h4> How to improve your skills. </h4>
    </div>
</div>
<div class="container second-div">
    <div class="main_head col-sm-12">
    <h3>Here Are Just A Testing Content</h3>
    <h4> How to improve your skills. </h4>
    </div>
</div>
<div class="container third-div">
    <div class="main_head col-lg-5">
    <span>Here Are Just A Testing Content</span>
    <h4> How to improve your skills. </h4>
    </div>
</div>
?>

Upvotes: 0

Views: 204

Answers (2)

Wavemaster
Wavemaster

Reputation: 1814

How about css nth-child() for styling every third element?

You can add as much styling as you want in the css.

.container:nth-child(1n) {
  background: blue;
}
.container:nth-child(2n) {
  background: red;
}
.container:nth-child(3n) {
  background: lime;
}
<div class="container first-div">
  <div class="main_head col-lg-6">
    <h3>Here Are Just A Testing Content</h3>
    <div class="take-right">How to improve your skills.</div>
  </div>
</div>
<div class="container second-div">
  <div class="main_head col-sm-12">
    <h3>Here Are Just A Testing Content</h3>
    <h4> How to improve your skills. </h4>
  </div>
</div>
<div class="container third-div">
  <div class="main_head col-lg-5">
    <span>Here Are Just A Testing Content</span>
    <h4> How to improve your skills. </h4>
  </div>
</div>
<div class="container first-div">
  <div class="main_head col-lg-6">
    <h3>Here Are Just A Testing Content</h3>
    <h4> How to improve your skills. </h4>
  </div>
</div>
<div class="container second-div">
  <div class="main_head col-sm-12">
    <h3>Here Are Just A Testing Content</h3>
    <h4> How to improve your skills. </h4>
  </div>
</div>
<div class="container third-div">
  <div class="main_head col-lg-5">
    <span>Here Are Just A Testing Content</span>
    <h4> How to improve your skills. </h4>
  </div>
</div>

Upvotes: 1

Yash
Yash

Reputation: 1436

Try this: 

$classes = array('class1','class2','class3'); /* Create three class */
$cnt = 0; /* Create dummy counter */
foreach($val as $myval)
{  
   if($cnt == 3) $cnt = 0;
  ?>
   <div class="<?php echo $classes[$cnt];?>" ><?php $myval['name'] ?></div>
  <?php 
  $cnt++;  
}

Upvotes: 3

Related Questions