title: SCSS nesting nth-of-type
body: <p>Using SCSS and have a nested element which I am trying to nest an <code>nth-of-type()</code> rule into but it hasn't worked anyway I type it. I want every odd <code>el_header</code> element to be white text and every even one to be black.</p>
  
  <pre><code>.el {
    height: 500px;
    width: 500px;
  
    &amp;_header {
      height: 100%;
      width: 10%;
      background: #555;
      display: inline-block;
      line-height: 500px;
      text-align: center;
  
      &amp;nth-of-type(odd) {
        color: black;
      }
      &amp;nth-of-type(even) {
        color: white;
      }
  
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/p3gro32d/" rel="nofollow">DEMO</a></p>