title: Alternating row colours in CSS with nested levels
body: <p>I'm looking for the best way to implement alternating row colours for a theoretically infinite number of nested levels. Below is an example of the markup i'm testing with and the jsFiddle <a href="http://jsfiddle.net/DFn82/" rel="nofollow noreferrer">http://jsfiddle.net/DFn82/</a></p>
  
  <p>With nth-child it's very difficult to get the alternating colours to work correctly, you need to effectively hardcode the combinations for each level and the css rules grow exponentially.</p>
  
  <p>I can achieve the result I want using javascript, however the lists are completely dynamic and things are added and removed constantly. Performance wise using javascript doesn't seem like an option and could have some pretty massive implications.</p>
  
  <p>This only needs to work in IE9+</p>
  
  <p><img src="https://i.stack.imgur.com/yXO8D.png" alt="enter image description here"></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;span&gt;Item&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;Item&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;Item&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;span&gt;Item&lt;/span&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;span&gt;Item&lt;/span&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;span&gt;Item&lt;/span&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Item&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>