title: alternate row coloring scheme with nested lists
body: <p>I've a nested list so is the selector thats very specific, is there something wrong with it, cause I see the background green with all list items irrespective it's odd or even.</p>
  
  <p>adding some more html code as per the request</p>
  
  <pre><code>.detail ul.table-view li.table-view-cell ul.cell li:nth-child(even) .session {
      background-color: yellow;
  }
  .detail ul.table-view li.table-view-cell ul.cell li:nth-child(odd) .session {
      background-color: green;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="table-view"&gt; &lt;!-- ng-repeat="speaker in speakers | filter:{keynote:isKeynote} --&gt;
      &lt;li class="table-view-cell" ng-repeat="session in sessions"&gt;
          &lt;ul class="cell"&gt;
              &lt;li class="cell-content"&gt;
                  &lt;span class="time" style="background-color:#{{session.color}}"&gt;
                    abc
                  &lt;/span&gt;
                  &lt;span class="session"&gt;
                      &lt;div&gt;name &lt;/div&gt;
                      &lt;div&gt;Room 1&lt;/div&gt;
                  &lt;/span&gt;
              &lt;/li&gt;
            &lt;li class="cell-content"&gt;
                  &lt;span class="time" style="background-color:#{{session.color}}"&gt;
                    abc
                  &lt;/span&gt;
                  &lt;span class="session"&gt;
                      &lt;div&gt;name &lt;/div&gt;
                      &lt;div&gt;Room 1&lt;/div&gt;
                  &lt;/span&gt;
              &lt;/li&gt;
            &lt;li class="cell-content"&gt;
                  &lt;span class="time" style="background-color:#{{session.color}}"&gt;
                    abc
                  &lt;/span&gt;
                  &lt;span class="session"&gt;
                      &lt;div&gt;name &lt;/div&gt;
                      &lt;div&gt;Room 1&lt;/div&gt;
                  &lt;/span&gt;
              &lt;/li&gt;
            &lt;li class="cell-content"&gt;
                  &lt;span class="time" style="background-color:#{{session.color}}"&gt;
                    abc
                  &lt;/span&gt;
                  &lt;span class="session"&gt;
                      &lt;div&gt;name &lt;/div&gt;
                      &lt;div&gt;Room 1&lt;/div&gt;
                  &lt;/span&gt;
              &lt;/li&gt;
            &lt;li class="cell-content"&gt;
                  &lt;span class="time" style="background-color:#{{session.color}}"&gt;
                    abc
                  &lt;/span&gt;
                  &lt;span class="session"&gt;
                      &lt;div&gt;name &lt;/div&gt;
                      &lt;div&gt;Room 1&lt;/div&gt;
                  &lt;/span&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here's my DOM</p>
  
  <pre><code>&lt;ul class="table-view"&gt; &lt;!-- ng-repeat="speaker in speakers | filter:{keynote:isKeynote} --&gt;
      &lt;li class="table-view-cell" ng-repeat="session in sessions"&gt;
          &lt;ul class="cell"&gt;
              &lt;li class="cell-content"&gt;
                  &lt;span class="time" style="background-color:#{{session.color}}"&gt;
                      &lt;div class="start"&gt;{{session.start | date:"h:mma"}}&lt;/div&gt;
                      &lt;div class="to"&gt;to&lt;/div&gt;
                      &lt;div class="end"&gt;{{session.end | date:"h:mma"}}&lt;/div&gt;
                  &lt;/span&gt;
                  &lt;span class="session"&gt;
                      &lt;div&gt;{{session.name}}&lt;/div&gt;
                      &lt;div&gt;Room: {{session.room}}&lt;/div&gt;
                  &lt;/span&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Edit - Fixing the HTML, divs only for nesting elements and spans for text.</strong></p>
  
  <pre><code>&lt;ul class="table-view"&gt; &lt;!-- ng-repeat="speaker in speakers | filter:{keynote:isKeynote} --&gt;
          &lt;li class="table-view-cell" ng-repeat="session in sessions"&gt;
              &lt;ul class="cell"&gt;
                  &lt;li class="cell-content"&gt;
                      &lt;div class="time" style="background-color:#{{session.color}}"&gt;
                          &lt;span&gt;{{session.start | date:"h:mma"}}&lt;/span&gt;
                          &lt;span&gt;to&lt;/span&gt;
                          &lt;span&gt;{{session.end | date:"h:mma"}}&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="session" &gt;
                          &lt;span class="name"&gt;{{session.name}}&lt;/span&gt;
                          &lt;span class="room"&gt;Room: {{session.room}}&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>