title: nth-child not alternating div colour
body: <p>I have the <code>.links-image</code> div that should have a coloured border and alternating with a white border however the colour for all borders remains the same. changing the colour on  <code>.links-image:nth-child(odd)</code> will change the colour for all borders not just odd </p>
  
  <p><a href="http://jsfiddle.net/rcojb60u/" rel="nofollow">http://jsfiddle.net/rcojb60u/</a></p>
  
  <pre><code>&lt;div class="fullcontainer"&gt;
  &lt;div class="container"&gt;
      &lt;div class="content"&gt;
          &lt;div class="links-container"&gt;
  
  
          &lt;div class="links-wrap"&gt;
              &lt;div class="grid grid--flexcells grid--gutters grid--full gridsm--full gridmd--1of2 gridlg--1of2"&gt;
                  &lt;div class="grid-cell"&gt;
                      &lt;div class="box"&gt;
                          &lt;a href="http://{!! $linksitem-&gt;link !!}"&gt;
                          &lt;div class="links-image"&gt;
                              &lt;img class="u-full-width-links" src="images/links/{{ $linksitem-&gt;img }}" /&gt;
                                  &lt;div class="links-text-bg"&gt;
                                      &lt;div class="links-text-left"&gt;
                                          &lt;div class="links-text-top"&gt;&lt;span class="links-text-url"&gt;test text&lt;/span&gt;&lt;/div&gt;
                                          &lt;div class="links-text-bottom"&gt;&lt;span class="rev-img-tag"&gt;text&lt;/span&gt;&lt;/div&gt;  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;              
                  &lt;/div&gt;
                  &lt;div class="grid grid--flexcells grid--gutters grid--full gridsm--full gridmd--1of2 gridlg--1of2"&gt;
                  &lt;div class="grid-cell"&gt;
                      &lt;div class="box"&gt;
                          &lt;a href="http://{!! $linksitem-&gt;link !!}"&gt;
                          &lt;div class="links-image"&gt;
                              &lt;img class="u-full-width-links" src="images/links/{{ $linksitem-&gt;img }}" /&gt;
                                  &lt;div class="links-text-bg"&gt;
                                      &lt;div class="links-text-left"&gt;
                                          &lt;div class="links-text-top"&gt;&lt;span class="links-text-url"&gt;test text&lt;/span&gt;&lt;/div&gt;
                                          &lt;div class="links-text-bottom"&gt;&lt;span class="rev-img-tag"&gt;text&lt;/span&gt;&lt;/div&gt;  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;              
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
          &lt;/div&gt;&lt;!--links container--&gt;
      &lt;/div&gt;&lt;!--content end--&gt;
  
  
  
  &lt;/div&gt;&lt;!--container end--&gt;
  &lt;/div&gt;&lt;!--fullcontainer end--&gt;
  
  .links-container{width:100%; height:auto; }
  .links-image { position: relative; width: 100%; border: 10px solid #fff;}
  .links-image:nth-child(odd) { position: relative; height:200px;width: 200px; border: 10px solid #282828;}
  .links-text-bg{ display:flex; flex-direction:row; position: absolute; left: 0; bottom:0;width: 100%; height:60px; 
  background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.75); padding-left:20px; }
  .links-text-left{flex: 0 0 100%; height:70px;}
  .links-text-top{width:100%; height:30px; line-height:2; }
  .links-text-bottom{width:100%; height:40px; padding-top:2px;}
  
  
  .links-text-url{color: #DB016C; font-size: 20px; padding-top: 5px; }
  .links-wrap{margin-left:0px;}
  </code></pre>