<h1>Playing with nth-child</h1>

<div class="wrapper">
  
  <ol class="styled-list styled-list--0 animated">
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry">nth-child(even)</li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
  </ol>

  <ol class="styled-list styled-list--1 animated">
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry">nth-child(2n)</li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
  </ol>

  <ol class="styled-list styled-list--2 animated">
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry">nth-child(3n)</li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
  </ol>

  <ol class="styled-list styled-list--3 animated">
    <li class="styled-list__entry">nth-child(2n+1)</li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
  </ol>

  <ol class="styled-list styled-list--4 animated">
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry">nth-child(2n+2)</li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
    <li class="styled-list__entry"></li>
  </ol>
</div>
// Stuff we care about for this demo:
.styled-list--0 .styled-list__entry:nth-child(even) {
  animation: slide 1s ease-out forwards;
  background: orange;
}

.styled-list--1 .styled-list__entry:nth-child(2n) {
  animation: slide 1s ease-out forwards;
  background: red;
}

.styled-list--2 .styled-list__entry:nth-child(3n) {
  animation: slide 1s ease-out forwards;
  background: blue;
}

.styled-list--3 .styled-list__entry:nth-child(2n+1) {
  animation: slide 1s ease-out forwards;
  background: green;
}

.styled-list--4 .styled-list__entry:nth-child(2n+2) {
  animation: slide 1s ease-out forwards;
  background: purple;
}

// Fluff to make it easier to consume (mmmmh tasty fluff)
.styled-list {
  display: inline-block;
  width: 200px;
  border-left: 1px solid black;
  margin-left: 20px;
  margin-right: 20px;
  padding: 0;
  list-style-type: none;
}

.styled-list__entry {
  display: block;
  width: 150px;
  padding: 10px;
  margin: 4px;
  color: white;
  background: black;
  animation-delay: 250ms;
  counter-increment: step-counter;
  
  &:before {
    content: counter(step-counter) ". ";
    color: white;
  }
}

.animated li {
  animation-name: slide;
}

@keyframes slide {
  0% {margin-left: 0;}   
  100% {margin-left: 20px;}
}

.wrapper {
  display: flex;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.