nth-of-type evaluates to even for every element mystery
<p>I am struggling to figure out why I am unable to correctly use nth-of-type(even) and nth-of-type(odd) correctly in my markup.  I have tried many variations and used an xpath/css Chrome browser tool to verify that every instance of my element news-item-card-header evaluates to even.  If it were to work correctly in my example the bottom-border would alternate colors.</p>

<pre><code>&lt;!-- Card Begin --&gt;
&lt;div class="col-xs-12"&gt;
  &lt;div class="col-xs-2"&gt;&lt;/div&gt;
  &lt;div class="col-xs-8"&gt;
    &lt;div class="ui fluid card"&gt;
      &lt;div class="content"&gt;
        &lt;div class="header card-header"&gt;       
          &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;

          &lt;span class="news-item-card-header"&gt;
            John Doe is a new contact at the Advisor Group
          &lt;/span&gt;

        &lt;/div&gt;
        &lt;div class="description" style="padding-top:15px"&gt;
          Contact him for Portfolio Platform offerings (GEARS, Step Securities, CDs); ECAP Strategy Guide
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-2"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Card end --&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.news-item-card-header:nth-of-type(odd) {
  border-bottom: 2px solid #143F6E;
}

.news-item-card-header:nth-of-type(even) {
  border-bottom: 1px solid #FAAA41;
}
</code></pre>

<p>JSFiddle: <a href="https://jsfiddle.net/schins02/gmgztuwj/" rel="nofollow">https://jsfiddle.net/schins02/gmgztuwj/</a></p>

<p>Thanks for any help</p>