title: Change background-color of an element of the same class name, depending on the level in the DOM tree
body: <p>I have this basic HTML structure:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section-container"&gt;
    &lt;div class="section-expander"&gt;
    &lt;div class="section-content"&gt;
      &lt;div class="some-irrelevant-stuff"&gt;&lt;/div&gt;
      &lt;div class="section-children"&gt;
  
        &lt;div class="section-container"&gt;
          &lt;div class="section-expander"&gt;
          &lt;div class="section-content"&gt;
            &lt;div class="some-irrelevant-stuff"&gt;&lt;/div&gt;
            &lt;div class="section-children"&gt;
  
              &lt;div class="section-container"&gt;
                &lt;div class="section-expander"&gt;
                &lt;div class="section-content"&gt;
                  &lt;div class="some-irrelevant-stuff"&gt;&lt;/div&gt;
                  &lt;div class="section-children"&gt;
  
                    ...
  
                  &lt;/div&gt; &lt;!-- Closing 3rd level section-children --&gt;
                &lt;/div&gt; &lt;!-- Closing 3rd level section-content --&gt;
                &lt;/div&gt; &lt;!-- Closing 3rd level section-expander --&gt;
              &lt;/div&gt; &lt;!-- Closing 3rd level section-container --&gt;
  
            &lt;/div&gt; &lt;!-- Closing 2nd level section-children --&gt;
          &lt;/div&gt; &lt;!-- Closing 2nd level section-content --&gt;
          &lt;/div&gt; &lt;!-- Closing 2nd level section-expander --&gt;
        &lt;/div&gt; &lt;!-- Closing 2nd level section-container --&gt;
  
      &lt;/div&gt; &lt;!-- Closing 1st level section-children --&gt;
    &lt;/div&gt; &lt;!-- Closing 1st level section-content --&gt;
    &lt;/div&gt; &lt;!-- Closing 1st level section-expander --&gt;
  &lt;/div&gt; &lt;!-- Closing 1st level section-container --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a visual representation:
  <a href="https://i.stack.imgur.com/77hXj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/77hXj.jpg" alt="Two nested blocks inside one"></a></p>
  
  <p>Maybe the only thing that is not self explanatory is that .section-expander are the colored lines on the left.</p>
  
  <p>So, my question is if there is a way using only LESS, without adding new classes or using JS:</p>
  
  <p>1) change the background-color of the .section-expander on the left, depending on their nesting level in the DOM</p>
  
  <p>2) cycle the background-color of .section-content, again depending on the nesting level, as you can see in the screenshot (I cycle lightgray and white).</p>
  
  <p>The easiest way I could come up with is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.section-container {
  
    .section-expander { background-color: green; }
    .section-content {
      background-color: lightgray;
      
      .section-expander { background-color: blue; }
      .section-content {
        background-color: white;
        
        .section-expander { background-color: red; }
        .section-content {
          background-color: lightgray;
          
          ...
          
        }
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I feel it is not very clever doing it this way. I guess I should use some sort of a LESS cycle, but after hours of trying I really can't come up with something that works as intended. Could someone help me coming up with something better?</p>