How to echo CSS class only once in first iteration foreach in PHP?

Question

I'm facing a little problem, I have a css class which is called "negative margin" which I just want to apply once in the first div in a series of divs as it's part of my design. The code is as follows:

<?php foreach($records as $rec){ ?>
<div class="grid grid-lightgrey grid-pad negative-margin">
   <div class="col-1-1">
     <div class="module module-grey">

       <em>Project title: <?php echo $rec->project_title; ?></em><br>
       <em>Category: </em><?php echo $rec->project_category; ?><br>
       <em>Description: </em><?php echo $rec->project_description; ?>
        <br>
        <em>This project was started in: <?php echo $rec->project_year; ?></em><br>
        <em>This project ID is: </em>
        <?php echo $rec->project_id; ?>
     </div>
   </div>
</div>
<?php } ?>

The class negative-margin is applied to all the divs making them stack on top of each other and it's not what I wan't but I need this negative margin to be applied in the first div as I said for design purposes but I really don't know how this could be achieved. Any ideas would be greatly appreciated.

You could use an index and a conditional statement to track the first div. — BlackHatSamurai
– BlackHatSamurai, Commented Jul 7, 2015 at 17:17
Can you use css only on the parent tag? If yes, you can use css target :not(:first-child) — Thomas Dutrion
– Thomas Dutrion, Commented Jul 7, 2015 at 17:18

Ananth · Accepted Answer · 2015-07-07 17:23:09Z

4

You need a variable to track the first element because there is no other way to know the index in foreach loop. You can do:

<?php $i = 0; foreach($records as $rec): ?>
<div class="grid grid-lightgrey grid-pad <?php echo ($i == 0) ? 'negative-margin' : ''; ?>">
   <div class="col-1-1">
     <div class="module module-grey">

       <em>Project title: <?php echo $rec->project_title; ?></em><br>
       <em>Category: </em><?php echo $rec->project_category; ?><br>
       <em>Description: </em><?php echo $rec->project_description; ?>
        <br>
        <em>This project was started in: <?php echo $rec->project_year; ?></em><br>
        <em>This project ID is: </em>
        <?php echo $rec->project_id; ?>
     </div>
   </div>
</div>
<?php $i++; endforeach; ?>

answered Jul 7, 2015 at 17:23

Ananth

4,4252 gold badges23 silver badges26 bronze badges

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

Comments

Maximillian Laumeister · Accepted Answer · 2015-07-07 17:27:20Z

4

Use the first-child selector to define a CSS style that only applies to the first div.

div.grid:first-child { 
    margin-left: -10px;
}

edited Jul 7, 2015 at 17:27

answered Jul 7, 2015 at 17:19

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

Collectives™ on Stack Overflow

How to echo CSS class only once in first iteration foreach in PHP?

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