如何相互改变<li>或<tr>颜色

Question

i want to change the color of li or tr whatever possible after one another.

Note:- I want to call this in while loop so static class will be no solution

I want the output lke:-

<li>line1</li> //white background
<li>line2</li> //red background
<li>line3</li> //white background
<li>line4</li> //red background

or if possible in like:-

<tr>
<td>line1</td>  //white background
</tr>
<tr>
<td>line2</td>  //red background
</tr>
<tr>
<td>line3</td>  //white background
</tr>
<tr>
<td>line4</td>  //red background
</tr>

What i am trying yet is:-

<?php
$fields = CFS()->get('gallery');
foreach ($fields as $field) { <?
<table>
<tr><td><?php echo $field['slide_title']; ?></td></tr>
<tr><td><?php echo $field['upload']; ?></td></tr>
</table>
<?php }  ?>

Answer 1

You could achieve this by CSS :nth-of-type odd and even selector.

JSFiddle - DEMO

li:nth-of-type(odd) {
    color:red;
}
li:nth-of-type(even) {
    color:blue;
}

And for tds selector:

JSFiddle - DEMO

table tr:nth-of-type(odd) {
    color:red;
}
table tr:nth-of-type(even) {
    color:blue;
}

You could also use CSS :nth-child selector like this:

JSFiddle - DEMO

table tr:nth-child(2n+1) {
    color:red;
}
table tr:nth-child(2n) {
    color:blue;
}

NOTE: tr:nth-child(2n) - Represents the even rows of an HTML table.

and tr:nth-child(2n+1) - Represents the odd rows of an HTML table.

• Mozilla MDN :nth-of-type selector

• Mozilla MDN :nth-child selector