<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.