Add different styling to each MYSQL row displayed

Question

I need to add a different style to each row displayed from mysql. I am displaying last 4 rows and starting from the first row, the styles should be called first, second, third, fourth.

<?php
        $sql = "SELECT * FROM articles ORDER BY id DESC LIMIT 4";
        $result = $con->query($sql);

        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo '
                    <div class="ot-slider-layer first">
                        <a href="articles/'.$row['slug'].'">
                            <strong><i style="background-color: #ed2d00; color: #fff;">'.category_name_by_id($row['category']).'</i>'.$row['title'].'</strong>
                            <img src="images/articles/'.$row['image'].'" alt="'.$row['title'].'" />
                        </a>
                    </div>
                ';
            }
        } else {
            echo "There is no news";
        }
    ?>

Add a counter that is incremented in your while loop and set your class or whatever accordingly. Alternatively you could add like (@row_number:=@row_number + 1) AS num into your SELECT statement and use that to determine your style class/id/whatever. — JNevill
– JNevill, Commented Dec 13, 2019 at 16:08

JBuser · Accepted Answer · 2019-12-13 16:22:18Z

1

this would work in this scenario:

<?php
        $sql = "SELECT * FROM articles ORDER BY id DESC LIMIT 4";
        $result = $con->query($sql);

        if ($result->num_rows > 0) {
            //array of class names for 4 different rows
            $array = array('first', 'second', 'third', 'fourth');
            //counter variable
            $i = 0;  
            while($row = $result->fetch_assoc()) {
                echo '
                    <div class="ot-slider-layer '.$array[$i].'">
                        <a href="articles/'.$row['slug'].'">
                            <strong><i style="background-color: #ed2d00; color: #fff;">'.category_name_by_id($row['category']).'</i>'.$row['title'].'</strong>
                            <img src="images/articles/'.$row['image'].'" alt="'.$row['title'].'" />
                        </a>
                    </div>
                ';
                //increment counter variable for each row loop
                ++$i;
            }
        } else {
            echo "There is no news";
        }
    ?>

answered Dec 13, 2019 at 16:22

JBuser

747 bronze badges

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

4 Comments

Dalyan Over a year ago

Thank you for sharing this but upon trying it, it only displays the first array value on each row not the others

Dalyan Over a year ago

Ok, fixed it. $i = 0; should be outside the loop

JBuser Over a year ago

are you sure you copied it exactly? particularly the "++$i;" part inside the end of the while loop - that's what makes the $i go from 0 to 1 to 2, etc. in order for the array key to be correct. I just tried a version in my environment and it printed out as expected

Dalyan Over a year ago

I did, as i mentioned above, it worked when i moved the $i = 0; outside the while loop

søren · Accepted Answer · 2019-12-13 16:25:41Z

0

You should use CSS for this. have a look the :nth-child-selector.

answered Dec 13, 2019 at 16:25

søren

131 silver badge3 bronze badges

Comments

miken32 · Accepted Answer · 2020-01-02 20:51:50Z

This can be done most easily in CSS without the need for server-side calculations. Your question wasn't clear if you were looking to alternate styles every 4 rows, or just style the last 4. But either can be done with CSS:

Alternating: using the :nth-child selector.

div.ot-slider-layer:nth-child(4n+1) { background: #00ffff50; }
div.ot-slider-layer:nth-child(4n+2) { background: #0000ff50; }
div.ot-slider-layer:nth-child(4n+3) { background: #00000050; }
div.ot-slider-layer:nth-child(4n+4) { background: #ff000050; }

<div class="container">
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>
    </div>
</div>

Last 4 only: using the nth-last-child selector

div.ot-slider-layer:nth-last-child(4) { background: #00ffff50; }
div.ot-slider-layer:nth-last-child(3) { background: #0000ff50; }
div.ot-slider-layer:nth-last-child(2) { background: #00000050; }
div.ot-slider-layer:nth-last-child(1) { background: #ff000050; }

<div class="container">
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>
    </div>
</div>

Collectives™ on Stack Overflow

Add different styling to each MYSQL row displayed

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related