odd even css

by Mr_Vasu

HTML

<div class="main">

  <div class="parent">
    <a href="">
      <figure></figure>
      <div>
      </div>
    </a>
  </div>
  <div class="parent">
    <a href="">
      <figure></figure>
      <div>

      </div>
    </a>
  </div>
  <div class="parent">
    <a href="">
      <figure></figure>
      <div>

      </div>
    </a>
  </div>
  <div class="parent">
    <a href="">
      <figure></figure>
      <div>

      </div>
    </a>
  </div>
  <div class="parent">
    <a href="">
      <figure></figure>
      <div>

      </div>
    </a>
  </div>
</div>

SCSS

.main{
  .parent{
    display:inline-block;
    width:100%;
    a{
      display:inline-block;
    }
    figure{
      display:inline-block;
      vertical-align:top;
      margin:0;
      padding:0;
    }
    div{
      display:inline-block;
      vertical-align:top;
    }
    &:nth-child(even){
      figure{background:red;
      width:100px;
      height:100px;
      }
      div{background:yellow;
    width:100px;
    height:100px;
  }
    }
  }
  .parent:nth-child(odd){
    figure{background:green;
    width:100px;
    height:100px;
    }
    div{background:red;
    width:100px;
    height:100px;
  }
  }
}