Geek asks and answers

Zebra N strip using css3 selectors?

We have a basic zebra stripe template that is included in our .less file for .list-striped.

We even work on a nested list, otherwise it changes the selectors, otherwise you will get an element of the parent list, and the first element of the list is a child with the same styles instead of opposites.

It works great. But we want to have N-level depth, so we don’t just want to embed styles into something higher than we think when the user ever nests, we hoped that something that could remove it and make it work for N-level instead of two-level lists?

I think I need magic nth-child(even)/nth-child(odd)for nested .list-item?

  • C1
    • C2
      • C1
      • C2
    • C1
      • C2
    • C2
  • C2
  • C1
  • C2

html 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 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;
    }
  }
}
+5
1

sass, css-, - .

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;
    }
  }

}
0

More articles:


All Articles