Elaine Byene Elaine Byene - 4 months ago 9
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

.EditFormClass:nth-child(3n)
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/

CSS:

.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>
<div class="col-xs-6">
<?php echo $field[1]; ?>
</div>
<?php } ?>
</div>

Answer

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)).

Comments