newbish newbish - 4 months ago 8
HTML Question

nth-of-type evaluates to even for every element mystery

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.

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

<span class="news-item-card-header">
John Doe is a new contact at the Advisor Group
</span>

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


CSS:

.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;
}


JSFiddle: https://jsfiddle.net/schins02/gmgztuwj/

Thanks for any help

Answer

even and odd work in once parrent container

.card-header .news-item-card-header {
  width: calc(100% - 35px);
}

.news-item-card-header {
  float: right;
}

.col-xs-12:nth-of-type(odd) .news-item-card-header {
  border-bottom: 2px solid #143F6E;
}

.col-xs-12:nth-of-type(even) .news-item-card-header {
  border-bottom: 1px solid #FAAA41;
}


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

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


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

.card-header:nth-of-type(even) .news-item-card-header {
    border-bottom: 1px solid #FAAA41;
}*/
<div class="row" id="news-feed2">
  <div class="col-xs-12" id="news-feed-container">
    <h2>News Feed</h2>
    <div style="margin-top:40px"></div>

    <!-- Card Begin -->
    <div class="col-xs-12">
      <div class="col-xs-2"></div>
      <div class="col-xs-8">
        <div class="ui fluid card">
          <div class="content">
            <div class="header card-header">
              <span class="glyphicon glyphicon-earphone"></span>
              <span class="news-item-card-header">
              
                 Conversation with Brett Harrsion from Advisor Group shows there is progress being made towards the MLCD approval
            </span>
            </div>
            <div class="description" style="padding-top:15px">
              There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-2"></div>
    </div>
    <!-- Card end -->

    <!-- Card Begin -->
    <div class="col-xs-12">
      <div class="col-xs-2"></div>
      <div class="col-xs-8">
        <div class="ui fluid card">
          <div class="content">
            <div class="header card-header">
            
              <span class="glyphicon glyphicon-user"></span>
              <span class="news-item-card-header">
                John Doe is a new contact at the Advisor Group
              </span>

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

  </div>

</div>

Comments