html - Target every other children of each parent -

i've been struggling while, , it's time help. have this:

<div class="news-images">    <div class="col-md-12">      <div class="grid">        <div class="effect"></div>      </div>    </div>    <div class="col-md-12">      <div class="grid">        <div class="effect"></div>      </div>    </div>    <div class="col-md-12">      <div class="grid">        <div class="effect"></div>      </div>    </div>    <div class="col-md-12">      <div class="grid">        <div class="effect"></div>      </div>    </div>  </div>

i want target every other (a 2n+1, odd/even kind of thing) instance of "effect" class. possible pure css or need javascript?

thanks!

do want this? if not, please explain briefly.

.col-md-12:nth-child(odd) .effect{    background: black;    color: #fff;  }  .col-md-12:nth-child(even) .effect{    background: blue;    color: #fff;  }

<div class="news-images">    <div class="col-md-12">      <div class="grid">        <div class="effect">hello world!</div>      </div>    </div>    <div class="col-md-12">      <div class="grid">        <div class="effect">hello world!</div>      </div>    </div>    <div class="col-md-12">      <div class="grid">        <div class="effect">hello world!</div>      </div>    </div>    <div class="col-md-12">      <div class="grid">        <div class="effect">hello world!</div>      </div>    </div>  </div>