title: CSS - odd and even does not work
body: <p>I want to use the pseudo selectors odd end even. But if sequence of element is divided by another element, e.g. a heading the order of odd and even is broken. How can I continue the initial order?</p>
  
  <p><a href="https://jsfiddle.net/stoaurkd/" rel="nofollow">JS FIDLLE</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="fig"&gt;
       &lt;figcaption&gt;t&lt;/figcaption&gt;
      &lt;figcaption&gt;&lt;/figcaption&gt;
    &lt;div&gt;headline&lt;/div&gt;
      &lt;figcaption&gt;&lt;/figcaption&gt;
      &lt;figcaption&gt;&lt;/figcaption&gt;    
      &lt;figcaption&gt;&lt;/figcaption&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fig figcaption:nth-child(even) {
   background:green;
  }
  
  .fig figcaption:nth-child(odd) {
    background:blue;
  }
  </code></pre>