N- level zebra striping using css3 selectors?

Question

We have a basic zebra striping pattern going in our .less file for .list-striped.

We even have it working for a nested list, aka, it reverses the selectors, otherwise you end up with the parent list item, and the first list item of the child having the same styles instead of being opposites.

This is working fine, But, we are wanting to have N-level depths, so we don't really want to just keep nesting the styles to something above whatever we think a user would ever nest, we were hoping there was something that could tidy this up and make it work for N-level instead of just 2-level lists?

I am thinking I need some nth-child(even)/nth-child(odd) magic on the nested .list-item?

C1
- C2
  - C1
  - C2
- C1
  - C2
- C2
C2
C1
C2

The html is basically

<div class="list-striped">
    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a>
                <!-- We could duplicate the n-level nesting item here as 
                     much as we want -->
            </div>
        </div>
        <!-- End N-level Nesting -->

    </div>

    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a>
                <!-- We could duplicate the n-level nesting item here as 
                     much as we want -->
            </div>
        </div>
        <!-- End N-level Nesting -->

    </div>
</div>

And the css

div {
  .list-striped {

    .list-item:nth-child(odd) {

      a {
        background-color: @tableBackgroundAccent;
      }

      .list-striped {

        .list-item:nth-child(odd) a {
          background-color: @white;
        }

        .list-item:nth-child(even) a {
          background-color: @tableBackgroundAccent;
        }
      }

    }

    .list-item:nth-child(even) {

      a {
        background-color: @white;
      }

      .list-striped {

        .list-item:nth-child(even) a {
          background-color: @white;
        }

        .list-item:nth-child(odd) a {
          background-color: @tableBackgroundAccent;
        }
      }

    }

  }

  &.list-hover {
    .list-item:hover a {
      background-color: @tableBackgroundHover;
    }
  }
}

Does this help? http://stackoverflow.com/questions/9867471/zebra-striping-nested-lists-with-css — tahdhaze09, Feb 22 '13 at 15:44
Not quite what I am after, however I will add a list for what I am going for. — Hailwood, Feb 22 '13 at 15:48
Although I do take from that answer that this will not be possible without javascript, or deep nesting. — Hailwood, Feb 22 '13 at 15:51
Not possible (without JavaScript). Not even when you create deeply nested CSS rules to cover nested lists. Alternating parent items depends on how many children the predecessor item has (or if it has any at all). You can't determine that with CSS. I'd just loop over all `.list-item` with JavaScript and give them an additional class. — maryisdead, Mar 27 '15 at 08:31

Simon Dragsbæk · Answer 1 · 2015-04-17T13:29:23.023

Not a fully finish solution in sass, but here is a css solution, and in the comments is a work in progress sass solution to your issue.

http://codepen.io/sp90/pen/eNOZZz

HTML:

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho
        <ul>
            <li>foo</li>
            <li>foo</li> 
            <li>foo</li>
            <li>foo</li>            
        </ul>
    </li>
    <li>ho
        <ul>
            <li>foo</li>
            <li>foo</li>    
            <li>foo</li>
            <li>foo</li>        
        </ul>
    </li>
    <li>ho</li>
</ul>

Sass:

ul {
  > li:nth-child(even) {
    background: red;
    ul li:nth-child(even) {
      background: red;
    }
    ul li:nth-child(odd) {
      background: blue;
    }
  }
  > li:nth-child(odd) {
    background: blue;
    ul li:nth-child(odd) {
      background: red;
    }
    ul li:nth-child(even) {
      background: blue;
    }
  }

}

N- level zebra striping using css3 selectors?

And the css

1 Answers1