title: Weird behaviour of CSS nth-of-type
body: <p>I use CSS nth-of-type(even) for sorting divs. Normally it is working fine, but when I make AJAX request and put new HTML div after another one, selector starts working weird.</p>
  
  <pre><code>.row &gt; .cd-timeline-block-sort:nth-of-type(even) &gt; .cd-timeline-content {
    float: right;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/itVBj.png" alt="Printscreen of timeline (before)"></p>
  
  <pre><code>&lt;div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284"&gt;
  &lt;div class="cd-timeline-block cd-timeline-block-sort" data-event-id="268"&gt;
  &lt;div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282"&gt;
  </code></pre>
  
  <p>and after AJAX request:</p>
  
  <p><img src="https://i.stack.imgur.com/uC1JG.png" alt="Printscreen of timeline (after)"></p>
  
  <pre><code>&lt;!-- 1 --&gt;&lt;div class="cd-timeline-block cd-timeline-block-sort" data-event-id="284"&gt;
  &lt;!-- 2 --&gt;&lt;div class="cd-timeline-block" data-event-id="268" style="display: none;"&gt;
  &lt;!-- 3 --&gt;&lt;div class="cd-timeline-block cd-timeline-block-sort eventForm" id="eventEditForm" style="display: block;"&gt;
  &lt;!-- 4 --&gt;&lt;div class="cd-timeline-block cd-timeline-block-sort" data-event-id="282"&gt;
  </code></pre>
  
  <p>In my second example are 4 divs and 3 of them with class .cd-timeline-block-sort . I need put (1) on left, (3) on right and (4) on left side.</p>