brandonstiles brandonstiles - 4 months ago 14
CSS Question

How to change the color of every even row?

I can't seem to make the right CSS selector to change the color of every other Font Awesome icon. After trying many different combinations (putting FA icon in a div, giving it different IDs and classes), this is the last thing I have:

HTML:

<div id="approachWrapper" class="col-xs-12 col-md-10 col-md-offset-1">
<?php if (have_rows('approach_steps')):while(have_rows('approach_steps')):the_row();?>
<div class="col-xs-12 col-md-3 p-b-2 approachBox">
<h2 class="text-xs-center p-t-2"><?php the_sub_field('approach_step');?></h2>
<div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-<?php the_sub_field('approach_icon');?> fa-3x col-xs-12 text-xs-center"></i></div>
<p class="text-xs-left"><?php the_sub_field('approach_description');?></p>
</div>
<?php endwhile; else : endif; ?>
</div>


CSS:

.approachIcon{
color: white;
}
.approachIcon:nth-of-type(2n){
color: #E0991B;
}

Answer

If I've understood your for loop properly you'll want something like this:

div.approachBox:nth-child(even) { background-color: #FFFFFF; }
div.approachBox:nth-child(odd) { background-color: #E0991B; }
<div id="approachWrapper" class="col-xs-12 col-md-10 col-md-offset-1">
  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>

  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>

  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>

  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>
</div>

Example: https://jsfiddle.net/e74sr6ud/2/

In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords 'even' and 'odd' are just convenient shorthands. For example, for a long list you could do this:

li:nth-child(5n+3) { font-weight: bold }

Source: https://www.w3.org/Style/Examples/007/evenodd.en.html

Comments