CODEWITHSUNDEEP
phphtmlmysqlcss
Crion
Crion

Reputation: 207

how to change css style for every second data (picture) from database?

Is there any chance when reading data from MySQL database to apply PHP code so every second record will have something different(different css code ).

For example: I am using images like this for my comment system. http://prntscr.com/3hpiep

Every image is in a circle shape, but I want every second image to have a circle shape and others should a square shape.

Can this be done?

http://prntscr.com/3hplgr

Upvotes: 1

Views: 157

Answers (4)

CupawnTae
CupawnTae

Reputation: 14580

You could use

.myclass:nth-child(even) {/* round style */}
.myclass:nth-child(odd) {/* square style */}

as long as they share a common parent element.

If you have a deeper structure, you may need to use the selector somewhere higher up the tree, e.g.

<div class="parent">
    <div class="comment_image"><img .../></div>
    <div class="comment_image"><img .../></div>
</div>

You would want

.comment_image:nth-child(even) img {/* round style */}
.comment_image:nth-child(odd) img {/* square style */}

(although in this example you could also apply the style to the div - this is just to illustrate the hierarchy)

From the PHP code you pasted in the comments below, it seems you have a structure like

<div>
  <div>...</div>
  <div class="comment_box"><div><img/></div>...</div>
  <div>...</div>
  <div class="comment_box"><div><img/></div>...</div>
...
</div>

Which means you actually want to apply the round style to the image in every fourth div inside the outer div, starting with the second. Phew! Here's the CSS for that:

.comment_box img {/* square style */}
.comment_box:nth-child(4n+2) img {/* round style */}

Upvotes: 3

Chorochrondochor
Chorochrondochor

Reputation: 100

You can use a while cycle to iterate over results from a database query. In the while cycle you decide whether the current iteration is even or odd. If the current iteration is odd, then add odd class to the element, if the current iteration is even, then add even class to the element.

I wrote a simple example which uses PDO library for working with database:

echo '<div class="items">';
$isOdd = false;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    echo '<div class="' . (($isOdd) ? 'odd' : 'even') . '"><img src="" /></div>';
    $isOdd = !$isOdd;
}
echo '</div>';

The result of the cycle will be:

<div class="items">
    <div class="odd"><img src="" /></div>
    <div class="even"><img src="" /></div>
</div>

Another way how to achieve the same result is to use nth-child(even) and nth-child(odd) in CSS:

.items div:nth-child(even) {
    /* Properties */
}

.items div:nth-child(odd) {
    /* Properties */
}

Upvotes: 0

Hayk Manasyan
Hayk Manasyan

Reputation: 506

You can use :nth-child even and odd selectors. Place each image in one same tag (like <li> or <div>) and in css use 

your-tag:nth-child(even) {/* round style */}
your-tag:nth-child(odd) {/* round style */}

Upvotes: 0

Chip Dean
Chip Dean

Reputation: 4302

Use a counter inside your loop. 

if($counter%2==0) 
   {//Even}
else
   { // Odd}

Upvotes: 1

Related Questions