html - Why does nth-of-type() and nth-child() break with unrelated element -

i missing fundamental have following html

<div class="test-cont">      <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">test2</div>     </div>     <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">hello world</div>     </div>     <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">test2</div>     </div>     <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">hello world</div>     </div> </div> 

and using following selectors

 .test-cont .row:nth-of-type(odd) {      background: purple;  }  .test-cont .row:nth-of-type(even) {      background: red;  } 

which believe expresses 'select nth child items of .text-cont class contains .row , either odd or even'.

yet <div class="md-margin"></div> break these selectors.

so end

instead of alternating pattern expect. problem resolved when remove md-margin divs. missing?

it because have md-margin divs in between, making them even ones.

(althought :nth-of-type show result want when using classes - depending on markup -, refers element type, that's why div md-margin "counting" here.

snippet md-margin

.test-cont .row:nth-of-type(4n+2) {       background: purple;   }   .test-cont .row:nth-of-type(4n+4) {       background: red;   }

<div class="test-cont">        <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">test2</div>      </div>      <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">hello world</div>      </div>      <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">test2</div>      </div>      <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">hello world</div>      </div>  </div>   

snippet without md-margin

.test-cont .row:nth-of-type(odd)  {    background: purple;  }  .test-cont .row:nth-of-type(even) {    background: red;  }

<div class="test-cont">    <div class="row">      <div class="col-md-12">test2</div>    </div>    <div class="row">      <div class="col-md-12">hello world</div>    </div>    <div class="row">      <div class="col-md-12">test2</div>    </div>    <div class="row">      <div class="col-md-12">hello world</div>    </div>  </div>