css - Style odd and even sibling elements - excluding those set to display:none -

consider these elements:

<div class="accordion-content">     <div><?php the_field('f_1'); ?></div>     <div><?php the_field('f_2'); ?></div>     <div><?php the_field('f_3'); ?></div>     <div><?php the_field('f_4'); ?></div>     <div><?php the_field('f_5'); ?></div>     <div><?php the_field('f_6'); ?></div>     <div><?php the_field('f_7'); ?></div>     <div><?php the_field('f_8'); ?></div>     <div><?php the_field('f_9'); ?></div>     <div><?php the_field('f_10'); ?></div>     <div><?php the_field('f_11'); ?></div> </div> 

and styling

.accordion-content div:empty{display: none}  .accordion-content div:nth-of-type(odd) {   background-color:#f0f0f1; }  .accordion-content div:nth-of-type(even){   background-color:#e1e1e4; } 

link static fiddle example http://codepen.io/whispering_jack/pen/ymwozj

if user enters data in fields display content otherwise if field empty not displayed.

what trying achieve alternating colors of stripes, current css targets non displayed elements , result if fields not filled in colors not alternating.

can suggest solution target displayed div alternating background color? css or scss options welcome, js last resort.

thanks.

edit: still chasing assistance on this.

ok after experimentation , working on related problem solution loop through elements jquery, if spans empty .remove dom. allows div:empty class fire.

success!

edit: sample code requested, ultra light dynamic accordion wordpress use advanced custom fields, turn plugin.

html

 <div class="accordion-content default">     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>     <div><span>years on council</span><span><?php the_field(''); ?></span></div> </div>    

jquery

$(document).ready( function($) { //for element, iterate each object $('.accordion-content div').each(function(i, obj) {     //the object var $this = $(this);     //if object empty if ($this.find('span:empty').length) {     //remove dom (firing .element:empty:{display:none})     $this.remove(); }; });   //hide other panels except first $(".accordion-content:not(:first)").hide(); //onclick $('#accordion').find('.accordion-toggle').click(function(){    //expand or collapse panel   $(this).next().slidetoggle('fast');    //and, hide other panels   $(".accordion-content").not($(this).next()).slideup('fast');  }); }); //set background color var color="rgba(255,222,0,"; //change background color of .element function repaint() {     //how many of class?   var = $('.accordion-toggle').length,       //opacity 1 - 10 divided no. elements       total = 10/all; //iterate on each element   $('.accordion-toggle').each(function(i){         //countdown elements , each divide total element 10     var opacity = (total*(all-i))/10,             //join $opacity $color , finish         newtone = color+opacity+")";       //set background color of element new color     $(this).css('background-color',newtone)   }) } repaint() 

css

/*-------------------------------------------------------------- ## lightweight accordian --------------------------------------------------------------*/ #accordion{width:100%;margin: 0 20px}  #accordion .type-freeman{margin-bottom:0;}  .accordion-toggle {cursor: pointer;} .accordion-content {display: none;} .accordion-content.default {display: block;}  .accordion-toggle{   margin:0;   padding:20px 20px; } .accordion-content div{margin:0;padding:16px 20px;}  .accordion-content div:empty{display: none}  .test{display: none}  .accordion-content div:nth-of-type(odd) {   background-color:#f0f0f1; }  .accordion-content div:nth-of-type(even){   background-color:#e1e1e4; }   .accordion-content div span:first-of-type{  text-align: left;     display: inline-block;     width: 50% }  .accordion-content div span:last-of-type{  text-align: right;      display: inline-block;     width: 50% }