Elaine Byene Elaine Byene - 1 year ago 56
CSS Question

Alternate colour between div using css

I want the alternating EditFormClass div to have a blue colour but this isn't working. I even tried

but it didn't work. I guess the issue is because of the col-xs-6 div in between. How do I get this working?

Please help!

JSFIDDLE: https://jsfiddle.net/4kpz876e/


.EditFormClass:nth-child(odd) {
color: blue;

PHP Code

<div class="row">
<?php foreach ($this->fields as $field) { ?>
<div class="col-xs-5 EditFormClass">
<?php echo $field[0]; ?>
<div class="col-xs-6">
<?php echo $field[1]; ?>
<?php } ?>

Answer Source

You can use .col-xs-3:nth-child(4n-1) for that:

.col-xs-3:nth-child(4n-1) {
    color: blue;

Check here: https://jsfiddle.net/yhvbLgun/

The explanation

In each row you have 4 child-divs, and you want the 3rd of them to have the blue color, so apply the blue color to the 4th-1 child div (using :nth-child(4n-1)).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download