Databases
StackOverflow2013
Postsdbo
POAlternating row colours in CSS with nested levels
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAlternating row colours in CSS with nested levels
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload