title: Possible to change background-color according to nested level?
body: <p>I have an ordered list that can potentially have an infinite amount of nested lists. I'm looking to dynamically change the <code>background-color</code> of each nested list so that it progressively gets darker, making the grouping of each list much easier to understand.</p>
  
  <p>So I have this basic structure (that can continue infinitely):</p>
  
  <pre><code>&lt;ol class="top-level-list"&gt;
      &lt;li&gt;
          &lt;ol&gt;
              &lt;li&gt;
                  &lt;ol&gt;
                      &lt;li&gt;&lt;/li&gt;
                  &lt;/ol&gt;
              &lt;/li&gt;
          &lt;/ol&gt;
      &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>Right now, I can accomplish this using something like this:</p>
  
  <pre><code>.top-level-list li ol li ol li {
      background: #D4D4D4;
  }
  
  .top-level-list li ol li ol li ol li{
      background: #C7C7C7;
  }
  </code></pre>
  
  <p>That gives me what I want, but it is limited in how many levels I can use and each level adds more and more data to my CSS file, resulting in longer load times. </p>
  
  <p>Is there a way to dynamically set the color with a single selector? I know CSS3 has added some new CSS selector tricks, but I can't find anything documenting something like this. Nor can I find a way to make a value in the selector correspond to the selector itself.</p>