title: why pseudo selector not working as expected
body: <p>I'm trying to use pseudo selector with odd and even, but the selector rather select every element</p>
  
  <pre><code>&lt;div class="col-md-12 col-xs-12 mt10 mb10 no-padding-side p-method"&gt;
  &lt;div class="col-sm-6 col-xs-6 no-padding-side"&gt;
      &lt;div class="with-method"&gt;
          Paypal
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-sm-6 col-xs-6 no-padding-side"&gt;
      &lt;div class="with-method"&gt;
          Wechat
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-sm-6 col-xs-6 no-padding-side"&gt;
      &lt;div class="with-method"&gt;
          Alipay
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-sm-6 col-xs-6 no-padding-side"&gt;
      &lt;div class="with-method"&gt;
          Mobile Money
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have tried the below variation of selector but to no success</p>
  
  <pre><code> .with-method{
     margin-bottom:5px;
   }
  
   .test &gt; div .with-method:nth-of-type(odd){
     background-color: yellow;
  }
  .test &gt; div .with-method:nth-of-type(even){
     color:blue;
  }
  
  .with-method{
    margin-bottom:5px;
  }
  </code></pre>
  
  <p>also try select direct with the inner div like this</p>
  
  <pre><code> .with-method:nth-of-type(odd){
   background-color: yellow;
  }
  .with-method:nth-of-type(even){
     color:blue;
  }
  </code></pre>
  
  <p>but yellow added to all element rather than the ones with odd index</p>