CODEWITHSUNDEEP
phpcss
billys
billys

Reputation: 17

Change css for every 4th row

I want to display every 4th row grabbed from the database with different CSS style. The first three rows from the DB should take the CSS style (col-4) but the fourth row should take the CSS style (col-4 last): How can I do this with PHP. My code is showing below.

<?php foreach($result as $value) : ?>
    <div class="col-4">
        <a href="view.php?m_id=<?php echo $value['m_id']; ?>">
            <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px">
        </a>
        <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3>
        <p><strong><?php echo $value['name']; ?></strong> </p>
        <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p>
    </div>
<?php endforeach; ?>

Upvotes: 1

Views: 611

Answers (5)

Spudley
Spudley

Reputation: 168665

You don't need to use PHP at all; CSS provides this functionality on its own.

.col-4 { 
    ..... your standard css for the columns ...... 
}
.col-4:nth-child(4) { 
    ..... your special css for the 4th column
}

Alternatively, if the 4th element is the last one in the set (as you hinted in the question), you could use col-4:last-child { ... } instead.

Browser compatibility note: If you need to support IE8 or earlier with these selectors, you will need to use a CSS polyfill script such as Selectivizr, since older IE versions don't support it. Selectivizr deals with that problem nicely though.

Upvotes: 1

Karl Adler
Karl Adler

Reputation: 16786

div:nth-child(4n)

use nth-child with multiplicator in css

http://css-tricks.com/how-nth-child-works/

Asked also here: Select every Nth element in CSS

Upvotes: 0

Imperative
Imperative

Reputation: 3183

<?php foreach($result as $i=>$value) : ?>
    <div class="col-4<? if ($i%4==3) echo ' last'; ?>">

Upvotes: 0

TimWolla
TimWolla

Reputation: 32691

Simply count how many rows you have outputted and use the modulus to check whether it is a 4th row:

$index = 0;
<?php foreach($result as $value) : ?>
    <div class="col-4<?php if (++$index % 4 == 0): ?> last<?php endif; ?>">
        <a href="view.php?m_id=<?php echo $value['m_id']; ?>">
            <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px">
        </a>
        <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3>
        <p><strong><?php echo $value['name']; ?></strong> </p>
        <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p>
    </div>
<?php endforeach; ?>

Upvotes: 1

Jon
Jon

Reputation: 437336

You can easily do this with the :nth-child CSS selector:

.col-4:nth-child(4n) {
    /* styles for every 4th row */
}

If you do not want to style every 4th row but instead only the 4th row, do not use the n in 4n:

.col-4:nth-child(4) { ... }

Browser compatibility is not bad at all; everything except IE < 9 is supported.

Upvotes: 4

Related Questions